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)触发的自定义函数中,然后传递给后台,实现处理相关行数据的目标。

总结

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

相关文章

  • Element Notification通知的实现示例

    Element Notification通知的实现示例

    这篇文章主要介绍了Element Notification通知的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • Vue中封装input组件的实例详解

    Vue中封装input组件的实例详解

    这篇文章主要介绍了Vue中封装input组件的实例详解的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
    2017-10-10
  • Vue3+Element Plus实现动态标签页以及右键菜单功能

    Vue3+Element Plus实现动态标签页以及右键菜单功能

    这篇文章主要给大家介绍了关于Vue3+Element Plus实现动态标签页以及右键菜单功能的相关资料,Vue 3和Element Plus提供了一种简单的方法来实现侧边菜单栏与标签页之间的联动,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • vue之监听器的使用案例详解

    vue之监听器的使用案例详解

    这篇文章主要介绍了vue之监听器的使用案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • element中el-autocomplete的常见用法示例

    element中el-autocomplete的常见用法示例

    这篇文章主要给大家介绍了关于element中el-autocomplete的常见用法的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用element具有一定的参考学习价值,需要的朋友可以参考下
    2023-03-03
  • Vue 解决多级动态面包屑导航的问题

    Vue 解决多级动态面包屑导航的问题

    今天小编就为大家分享一篇Vue 解决多级动态面包屑导航的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 关于Vue3中defineProps用法图文详解

    关于Vue3中defineProps用法图文详解

    在vue3中组件传参有很多种方式,和v2大差不差,但是有的地方还是有很多的区别,下面这篇文章主要给大家介绍了关于Vue3中defineProps用法的相关资料,需要的朋友可以参考下
    2022-11-11
  • 浅入深出Vue之自动化路由

    浅入深出Vue之自动化路由

    这篇文章主要介绍了浅入深出Vue之自动化路由,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue-router 路由传参用法实例分析

    vue-router 路由传参用法实例分析

    这篇文章主要介绍了vue-router 路由传参用法,结合实例形式分析了vue-router 路由传参基本使用方法及操作注意事项,需要的朋友可以参考下
    2020-03-03
  • Vue实现预览文件(Word/Excel/PDF)功能的示例代码

    Vue实现预览文件(Word/Excel/PDF)功能的示例代码

    这篇文章主要为大家详细介绍了如何通过Vue实现预览文件(Word/Excel/PDF)的功能,文中的实现步骤讲解详细,需要的小伙伴可以参考一下
    2023-03-03

最新评论