ElementUI表格中添加表头图标悬浮提示

 更新时间:2021年12月07日 10:31:58   作者:阿雷前进中...  
本文主要介绍了ElementUI表格中添加表头图标悬浮提示,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文主要介绍了ElementUI表格中添加表头图标悬浮提示,分享给大家,具体如下:

在这里插入图片描述

<el-table-column
    label="操作"
    fixed="right"
    :render-header="tableAction"
    width="120">
    <!--scope 即为 userList  scope.row即为当前行数据 -->
    <template slot-scope="scope">
        <el-button @click="editCar(scope.row)" type="primary" icon="el-icon-edit" size="small" circle></el-button>
        <el-button @click="delCar(scope.row.carId)" type="danger"
                   icon="el-icon-delete" circle size="small"></el-button>
    </template>
</el-table-column>
 //表格操作提示
 tableAction() {
     return this.$createElement('HelpHint', {
         props: {
             content: '编辑车辆 / 删除车辆'
         }
     }, '操作');
 },

切记导入

import HelpHint from ‘~/components/HelpHint/HelpHint.vue';

并在 components中引入

HelpHint.vue 组件内容

<template>
  <span>
    <span style="margin-right: 8px"><slot></slot></span>
    <el-tooltip :content="content" :placement="placement">
      <i class="el-icon-question" style="cursor: pointer;"></i>
    </el-tooltip>
  </span>
</template>
<script>
  export default {
    name: 'HelpHint',
    props: {
      placement: {
        default: 'top'
      },
      content: String,
    },
    data() {
      return {}
    },
  }
</script>

到此这篇关于ElementUI表格中添加表头图标悬浮提示的文章就介绍到这了,更多相关Element  图标悬浮提示内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 在vue中通过render函数给子组件设置ref操作

    在vue中通过render函数给子组件设置ref操作

    这篇文章主要介绍了在vue中通过render函数给子组件设置ref操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue中的H5移动端项目 真机测试配置方式

    vue中的H5移动端项目 真机测试配置方式

    这篇文章主要介绍了vue中的H5移动端项目 真机测试配置方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue项目查看当前使用的elementUI版本的方法

    Vue项目查看当前使用的elementUI版本的方法

    今天小编就为大家分享一篇Vue项目查看当前使用的elementUI版本的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 详解vue3.x页面功能拆分方式

    详解vue3.x页面功能拆分方式

    本文主要介绍了vue3.x页面功能拆分方式,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • vue2文件流下载成功后文件格式错误、打不开及内容缺失的解决方法

    vue2文件流下载成功后文件格式错误、打不开及内容缺失的解决方法

    使用Vue时我们前端如何处理后端返回的文件流,下面这篇文章主要给大家介绍了关于vue2文件流下载成功后文件格式错误、打不开及内容缺失的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-04-04
  • 在Vue3中如何更优雅的使用echart图表详解

    在Vue3中如何更优雅的使用echart图表详解

    ECharts是一个强大的画图插件,在vue项目中,我们常常可以引用Echarts来完成完成一些图表的操作,下面这篇文章主要给大家介绍了关于在Vue3中如何更优雅的使用echart图表的相关资料,需要的朋友可以参考下
    2022-05-05
  • vue基于viewer实现的图片查看器功能

    vue基于viewer实现的图片查看器功能

    这篇文章主要介绍了vue基于viewer实现的图片查看器的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • vue-devtools快速安装过程

    vue-devtools快速安装过程

    vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率,这篇文章主要介绍了vue-devtools的安装,需要的朋友可以参考下
    2023-08-08
  • 一文了解Vue中的nextTick

    一文了解Vue中的nextTick

    Vue中的 nextTick 涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下。其中关于 nextTick 的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下 nextTick
    2019-05-05
  • Vue实现简单跑马灯特效

    Vue实现简单跑马灯特效

    这篇文章主要为大家详细介绍了Vue实现简单跑马灯特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05

最新评论