首页 > 网络编程 > JavaScript > javascript类库 > vue.js > element-ui在el-tabs组件最右侧添加按钮

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

2023-07-18 09:33:12 作者：神秘人加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）触发的自定义函数中，然后传递给后台，实现处理相关行数据的目标。

总结

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