element-ui在table中如何禁用其中几行

 更新时间:2023年10月18日 08:44:00   作者:怕是个神仙啊  
这篇文章主要介绍了element-ui在table中如何禁用其中几行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

element-ui在table中禁用其中几行

element-ui官网上提供了selectable属性

<el-table :data="tableData">
      <el-table-column prop="name" label="姓名" :selectable="checkSelectable">
      </el-table-column>
</el-table>
checkSelectable(row) {
    if(row.name === '王小虎'){
        return false//禁用
    }else{
    return true//不禁用
    }
}

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-cli的vuex配置

    深入理解基于vue-cli的vuex配置

    本篇文章主要介绍了基于vue-cli的vuex配置,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue树形结构获取键值的方法示例

    vue树形结构获取键值的方法示例

    这篇文章主要介绍了vue树形结构获取键值的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • Vue中使用定时器(setInterval、setTimeout)的两种方式

    Vue中使用定时器(setInterval、setTimeout)的两种方式

    js中定时器有两种,一个是循环执行 setInterval,另一个是定时执行 setTimeout,这篇文章主要介绍了Vue中使用定时器 (setInterval、setTimeout)的两种方式,需要的朋友可以参考下
    2023-03-03
  • vue+element实现表单校验功能

    vue+element实现表单校验功能

    这篇文章主要介绍了vue+element表单校验功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • Vue Extends 扩展选项用法完整实例

    Vue Extends 扩展选项用法完整实例

    这篇文章主要介绍了Vue Extends 扩展选项用法,结合完整实例形式分析了Vue Extends 扩展选项相关使用技巧与操作注意事项,需要的朋友可以参考下
    2019-09-09
  • vue3+ts实现一个表单组件的详细代码

    vue3+ts实现一个表单组件的详细代码

    这篇文章主要介绍了vue3+ts实现一个表单组件的详细代码,确保通过axios调用后端接口来获取省市区和街道数据,并在选择省市区时加载相应的街道数据,需要的朋友可以参考下
    2024-07-07
  • Vue 之孙组件向爷组件通信的实现

    Vue 之孙组件向爷组件通信的实现

    这篇文章主要介绍了Vue 之孙组件向爷组件通信的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue.nextTick()与setTimeout的区别及说明

    vue.nextTick()与setTimeout的区别及说明

    这篇文章主要介绍了vue.nextTick()与setTimeout的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue+axios+mock.js环境搭建的方法步骤

    vue+axios+mock.js环境搭建的方法步骤

    本篇文章主要介绍了vue+axios+mock.js环境搭建的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue Router的安装使用方法总结

    Vue Router的安装使用方法总结

    在本文中,我们详细讲解了Vue路由的使用方法,我们首先安装了Vue Router,然后创建了一个Vue Router实例,并配置了路由,感兴趣的朋友一起看看吧
    2023-11-11

最新评论