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如何优雅的清除定时器

    Vue如何优雅的清除定时器

    定时器如果不及时合理地清除,会造成业务逻辑混乱甚至应用卡死的情况,这个时就需要清除定时器,本文就介绍了Vue如何优雅的清除定时器,感兴趣的可以了解一下
    2021-07-07
  • Vue+tracking.js 实现前端人脸检测功能

    Vue+tracking.js 实现前端人脸检测功能

    这篇文章主要介绍了Vue+tracking.js 实现前端人脸检测功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-04-04
  • VUE入门学习之事件处理

    VUE入门学习之事件处理

    这篇文章主要介绍了vue事件处理原理及过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-10-10
  • Vue项目中安装依赖npm install一直报错的解决过程

    Vue项目中安装依赖npm install一直报错的解决过程

    这篇文章主要给大家介绍了关于Vue项目中安装依赖npm install一直报错的解决过程,要解决NPM安装依赖报错,首先要分析出错误的原因,文中将解决的过程介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • Vue项目部署的实现(阿里云+Nginx代理+PM2)

    Vue项目部署的实现(阿里云+Nginx代理+PM2)

    这篇文章主要介绍了Vue项目部署的实现(阿里云+Nginx代理+PM2),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • vue数据push后不能响应式更新的问题

    vue数据push后不能响应式更新的问题

    这篇文章主要介绍了vue数据push后不能响应式更新的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue实现全局菜单搜索框的示例

    Vue实现全局菜单搜索框的示例

    本文主要介绍了Vue实现全局菜单搜索框的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • 详解eslint在vue中如何使用

    详解eslint在vue中如何使用

    这篇文章主要为大家介绍了eslint在vue中如何使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-11-11
  • vue+element-ui监听滚动实现锚点定位方式(双向),锚点问题

    vue+element-ui监听滚动实现锚点定位方式(双向),锚点问题

    这篇文章主要介绍了vue+element-ui监听滚动实现锚点定位方式(双向),锚点问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue 编程式路由导航的实现示例

    Vue 编程式路由导航的实现示例

    本文主要介绍了Vue 编程式路由导航
    2022-04-04

最新评论