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

总结

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

相关文章

  • ant-design-vue中tree增删改的操作方法

    ant-design-vue中tree增删改的操作方法

    这篇文章主要介绍了ant-design-vue中tree增删改的操作方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • Vue3如何处理异步任务轮询

    Vue3如何处理异步任务轮询

    在许多应用程序中,我们经常需要执行定期的异步任务轮询,本文就介绍了Vue3如何处理异步任务轮询,感兴趣的可以了解一下
    2023-05-05
  • vue3鼠标经过显示按钮功能的实现

    vue3鼠标经过显示按钮功能的实现

    本篇文章介绍了如何使用 Vue3 实现一个鼠标经过显示按钮的效果,我们使用了 Vue3 的 Composition API 来创建响应式的数据,并使用了 @mouseover 和 @mouseleave 事件来监听鼠标的移入和移出事件,感兴趣的朋友一起看看吧
    2024-04-04
  • Vue之beforeEach非登录不能访问的实现(代码亲测)

    Vue之beforeEach非登录不能访问的实现(代码亲测)

    这篇文章主要介绍了Vue之beforeEach非登录不能访问的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • vue-cli3.0 特性解读

    vue-cli3.0 特性解读

    这篇文章主要介绍了vue-cli3.0 特性解读,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 浅谈 Vue 项目优化的方法

    浅谈 Vue 项目优化的方法

    这篇文章主要介绍了浅谈 Vue 项目优化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • Vue如何提升首屏加载速度实例解析

    Vue如何提升首屏加载速度实例解析

    这篇文章主要介绍了Vue如何提升首屏加载速度实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-06-06
  • vuex中Modules的使用详解

    vuex中Modules的使用详解

    本文主要介绍了vuex中Modules的使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • Vue项目配置、切换主题颜色详细教程(mixin+scss方式,简单高效)

    Vue项目配置、切换主题颜色详细教程(mixin+scss方式,简单高效)

    这篇文章主要给大家介绍了关于Vue项目配置、切换主题颜色(mixin+scss方式)的相关资料,根据预设的配色方案,在前端实现动态切换系统主题颜色,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • 使用Vue与Firebase构建实时聊天应用的示例代码

    使用Vue与Firebase构建实时聊天应用的示例代码

    随着互联网通讯技术的不断进步,实时聊天应用现在已成为我们日常生活中不可或缺的一部分,无论是社交媒体平台、工作沟通工具还是客户支持系统,实时聊天都在不断被需求,今天,我们将介绍如何使用Vue.js与Firebase来构建一个简单而强大的实时聊天应用,需要的朋友可以参考下
    2024-11-11

最新评论