如何去除element-ui中table的hover效果

 更新时间:2023年10月18日 09:38:59   作者:前端cv大师  
这篇文章主要介绍了如何去除element-ui中table的hover效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

去除element-ui中table的hover效果

  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: rgba(0, 0, 0, 0) !important;
  }

写一个rgb 色值 替换即可

为table的某一行添加样式 表明一种状态

 <el-table
      :data="dataList"
      style="width: 100%; margin-top: 30px"
      border
      stripe
      fit
      empty-text
      @row-click="tableRowClick"
      :row-class-name="tableRowClassName"
      @cell-mouse-enter="cursor"
      :style="cursorPointer"
      v-loading="listLoading"
    ></el-table>

tableRowClassName方法

    // 为table的某一行添加样式 表明一种状态
    tableRowClassName({ row, rowIndex }) {
      // 表示注销
      if (row.statusFlag === 2) {
        return "warning-row";
      }
      return "";
    },

“warning-row”即为要添加的样式类名

element-ui中使用table表格相关问题

1.hover某一行时修改背景颜色

可引入固定代码

.el-table--enable-row-hover {
  .el-table__body tr:hover > td {
    background: #E6FFF7;//这里写你想切换的颜色
  }
}`

2. 固定表头

当你的表格某一行需要hover或者active增加一定的样式或效果时,你会发现样式效果加上后,表头就算是固定宽度,但是还是会出现不断闪烁,这时候可在 总css文件里面 加上这段固定代码去控制

//固定表头
 .el-table th.gutter{
  display: table-cell!important;
}

.el-table colgroup.gutter{
  display: table-cell!important;
}

3. 对于有多选框的表格

需要勾选某行,就修改其背景颜色

如图:


在这里插入图片描述

//html中
  <el-table
    :data="tableData"
     style="width: 100%"
     @selection-change="handleSelectionChange"//获取点击的那一行的数据
     :row-style="rowClass"//设置单行样式
   >
//声明两个数组用来存储取出来的数据
 data() {
  return {
      selectRow: [],
      selectData: [],
     }
 }
//mothods中
    //click每一行函数---获取数据
    handleSelectionChange(data) {
      this.selectData = data;
    }, 
    // 修改样式
    rowClass({ row, rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return { "background-color": "#E6FFF7" };
      }
    },
 //watch中监听点击行数据变化
  watch: {
    selectData(data) {
      this.selectRow = [];
      if (data.length > 0) {
        data.forEach((item, index) => {
          this.selectRow.push(this.tableData.indexOf(item));
        });
      }
    },
  },

4. hover某一行

动态修改某一行的文本信息


在这里插入图片描述

//html中
<el-table
        :data="tableData"
        style="width: 100%"
        @cell-mouse-enter="handleMouseEnter"//鼠标移入事件
        @cell-mouse-leave="handleMouseLeave"//鼠标移出事件
      >
        <el-table-column label="账号状态" width="300" :key="itemkey">//这里绑定key值是为了避免改一行的值引发了修改所有行的值
           <template slot-scope="scope">
          <div v-if="enable==scope.row.id">//用唯一的id修改显示和隐藏
            <span class="edit">编辑</span>
            <span class="disable">禁用</span>
            <span class="delete">删除</span>
          </div>
          <div v-else>启用</div>
           </template>
        </el-table-column>

  //mothods中hover单元格函数
  handleMouseEnter: function (row, event) {
    this.itemkey = Math.random();//这里的key值给随机数
    this.showFunction = row.id;//这里绑定唯一的id
  },
  handleMouseLeave: function (row, event) {
    this.itemkey = Math.random();
    this.showFunction = 0;
  },

总结

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

相关文章

  • Vue组件化开发之通用型弹出框的实现

    Vue组件化开发之通用型弹出框的实现

    这篇文章主要介绍了Vue组件化开发之通用型弹出框的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • Vue2.0仿饿了么webapp单页面应用详细步骤

    Vue2.0仿饿了么webapp单页面应用详细步骤

    本篇文章给大家分享了Vue2.0仿饿了么webapp单页面应用详细步骤,有兴趣的朋友可以跟着操作下。
    2018-07-07
  • 在Vue3项目中使用Vuex进行状态管理的详细教程

    在Vue3项目中使用Vuex进行状态管理的详细教程

    在 Vue 3 中使用 Vuex 进行状态管理是一个很好的实践,特别是在涉及到多个组件间共享状态的情况,下面是如何在 Vue 3 项目中设置和使用 Vuex 的教程,包括 state, mutations, actions, getters 的概念及其用途,需要的朋友可以参考下
    2024-09-09
  • vue中使用element ui的弹窗与echarts之间的问题详解

    vue中使用element ui的弹窗与echarts之间的问题详解

    这篇文章主要介绍了vue中使用element ui的弹窗与echarts之间的问题详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue demi支持sfc方式的vue2vue3通用库开发详解

    vue demi支持sfc方式的vue2vue3通用库开发详解

    这篇文章主要为大家介绍了vue demi支持sfc方式的vue2vue3通用库开发详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Vue中的.vue文件的使用方式

    Vue中的.vue文件的使用方式

    这篇文章主要介绍了Vue中的.vue文件的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue3.0实现下拉菜单的封装

    vue3.0实现下拉菜单的封装

    这篇文章主要为大家详细介绍了vue3.0实现下拉菜单的封装代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • Vue3处理错误边界(error boundaries)的示例代码

    Vue3处理错误边界(error boundaries)的示例代码

    在开发 Vue 3 应用时,处理错误边界(Error Boundaries)是一个重要的考量,在 Vue 3 中实现错误边界的方式与 React 等其他框架有所不同,下面,我们将深入探讨 Vue 3 中如何实现错误边界,并提供一些示例代码帮助理解什么是错误边界,需要的朋友可以参考下
    2024-10-10
  • vue的diff算法知识点总结

    vue的diff算法知识点总结

    本篇文章给大家分享了关于vue的diff算法的相关知识点总结,有兴趣的朋友参考学习下。
    2018-03-03
  • vue中如何给多个按钮动态添加类名

    vue中如何给多个按钮动态添加类名

    这篇文章主要介绍了vue中如何给多个按钮动态添加类名问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11

最新评论