vue element-ui如何在el-tabs组件最右侧添加按钮

 更新时间:2023年07月18日 09:35:52   作者:神秘人加1  
这篇文章主要介绍了vue element-ui如何在el-tabs组件最右侧添加按钮问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

element-ui在el-tabs组件最右侧添加按钮

需求

需要在tabs页签切换栏的最右边添加一个按钮。如图:

实现方案

使用CSS来实现,css原理解释:

1.如果div的position设置了relative属性,但是没有指定偏移量,则相当于默认的position:static;

2.position:static 默认值,没有定位,元素出现在正常的流中;

3.position:absolute 绝对定位 相对于定位方式不是static的第一个父元素进行定位(往上寻找参照元素,一直到根元素为止,即body);

代码如下:

<div style='position: relative;'>
  <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
    <el-tab-pane label="Tab页签标题1" name="first">Tab页签内容1</el-tab-pane>
    <el-tab-pane label="Tab页签标题2" name="second">Tab页签内容2</el-tab-pane>
  </el-tabs>
    <el-button size='mini' style='position: absolute;right:10px;top:5px;'>右边按钮</el-button>
  </div>

element Table增加操作按钮例如编辑和删除

实际还是参考官方文档,官方文档链接

https://element.eleme.cn/#/zh-CN/component/table

找到Table表格这里点击查看相关内容

找到自定义列模板,这个模板比较适合做增删改查

在这里插入图片描述

分析模板

①模板效果图

在这里插入图片描述

②模板代码

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>

③找到编辑删除按钮的核心代码并关注此模板给出的提示

<el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>

tips:通过 Scoped slot 可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据,用法参考 demo。

我从其他文章中看到说

<template slot-scope="scope"></template>

是固定写法,关键关注点在scope,scope的话具体使用规则就在上面的tips中,我们通过scope就可以获取到row行信息,然后传递给按钮事件(例如单击事件click)触发的自定义函数中,然后传递给后台,实现处理相关行数据的目标。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue.extend和VueComponent的关系源码解析

    Vue.extend和VueComponent的关系源码解析

    这篇文章主要为大家详解了Vue.extend和VueComponent的关系源码解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-02-02
  • vue中如何监听url地址栏参数变化

    vue中如何监听url地址栏参数变化

    这篇文章主要介绍了vue中如何监听url地址栏参数变化问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • vue.js 获取select中的value实例

    vue.js 获取select中的value实例

    下面小编就为大家分享一篇vue.js 获取select中的value实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue3中无法为el-tree-select设置反选问题解析

    Vue3中无法为el-tree-select设置反选问题解析

    这篇文章主要介绍了Vue3中无法为el-tree-select设置反选问题分析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • Vue2.0学习之详解Vue 组件及父子组件通信

    Vue2.0学习之详解Vue 组件及父子组件通信

    本篇文章主要介绍了Vue2.0学习之详解Vue 组件及父子组件通信,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • vue树形结构获取键值的方法示例

    vue树形结构获取键值的方法示例

    这篇文章主要介绍了vue树形结构获取键值的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 详解vue中配置代理(解决跨域请求)

    详解vue中配置代理(解决跨域请求)

    这篇文章主要为大家详细介绍了vue如何通过配置代理来解决跨域请求的问题,文中的示例代码讲解详细,对我们深入学习vue有一定的帮助,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-08-08
  • vue实现键盘输入支付密码功能

    vue实现键盘输入支付密码功能

    这篇文章主要为大家详细介绍了vue实现键盘输入支付密码功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-08-08
  • 专业级Vue 多级菜单设计

    专业级Vue 多级菜单设计

    这篇文章主要为大家介绍了专业级的Vue 多级菜单设计实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue一个页面实现音乐播放器的示例

    vue一个页面实现音乐播放器的示例

    这篇文章主要介绍了vue一个页面实现音乐播放器的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02

最新评论