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 表单输入格式化中文输入法异常问题

    vue 表单输入格式化中文输入法异常问题

    v-model 是 vue.js 提供的语法糖,根据不同的表单控件监听不同的事件,实现对表单控件的数据双向绑定。这篇文章主要介绍了vue 表单输入格式化中文输入法异常,需要的朋友可以参考下
    2018-05-05
  • 使用vux实现上拉刷新功能遇到的坑

    使用vux实现上拉刷新功能遇到的坑

    最近公司在研发app,选择了基于Vue框架的vux组件库,现总结在实现上拉刷新功能遇到的坑,感兴趣的朋友参考下吧
    2018-02-02
  • VueJs 搭建Axios接口请求工具

    VueJs 搭建Axios接口请求工具

    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。今天我们来介绍VueJs 搭建Axios接口请求工具,需要的朋友参考下本文吧
    2017-11-11
  • 一文带你了解Vue3中toRef和toRefs的用法

    一文带你了解Vue3中toRef和toRefs的用法

    Vue3中toRef、toRefs都是与响应式数据相关的,本文主要来给大家讲解一下Vue3中的toRef和toRefs的使用,感兴趣的朋友跟随小编一起看看吧
    2023-01-01
  • 浅谈mvvm-simple双向绑定简单实现

    浅谈mvvm-simple双向绑定简单实现

    本篇文章主要介绍了浅谈mvvm-simple双向绑定简单实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Vue封装远程下拉框组件的实现示例

    Vue封装远程下拉框组件的实现示例

    本文主要介绍了Vue封装远程下拉框组件的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • vue 移动端注入骨架屏的配置方法

    vue 移动端注入骨架屏的配置方法

    骨架屏就是在页面未渲染完成的时候,先用一些简单的图形大致勾勒出页面的基本轮廓,给用户带来更好的体验。这篇文章主要介绍了vue 移动端注入骨架屏,需要的朋友可以参考下
    2019-06-06
  • element-ui 中使用upload多文件上传只请求一次接口

    element-ui 中使用upload多文件上传只请求一次接口

    这篇文章主要介绍了element-ui 中使用upload多文件上传只请求一次接口,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • vue封装全局的Loading问题

    vue封装全局的Loading问题

    本文详细介绍了在Vue项目中实现加载动画的方法,通过在app.vue注入样式、封装js文件及在main.js挂载,最后在页面调用触发的具体步骤,为开发者提供实用指南
    2026-05-05
  • vue使用SVG实现圆形进度条音乐播放

    vue使用SVG实现圆形进度条音乐播放

    这篇文章主要为大家详细介绍了vue使用SVG实现圆形进度条音乐播放,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论