vue el-table设置某些行不能选择以及特殊样式

最新推荐文章于 2024-08-06 17:53:41 发布

＊且听风吟

最新推荐文章于 2024-08-06 17:53:41 发布

阅读量4.3k

点赞数 4

分类专栏： # Vue 2.x

本文链接：https://blog.csdn.net/HH18700418030/article/details/110952190

版权

本文介绍了如何在Vue中使用Element-UI的el-table组件，实现根据条件禁用某些行的选中功能以及设置这些行的特殊样式。通过使用selectable属性配合JS函数判断行的选中状态，并利用row-class-name属性添加自定义class，结合CSS实现特定行的样式定制。

摘要由CSDN通过智能技术生成

如下图所示，满足特定条件的行不可选择，且颜色被设置成了其他颜色：
在这里插入图片描述 1）设置行不能选择

selectable为element-ui提供的属性，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选，返回true为可选，false为不可选
设置方法：

 <el-table-column type="selection" :selectable="checkSelectable" align="center" width="55"></el-table-column>

js方法，根据每一行的id是否等于某个特定的值判断该行是否可以被选中：

checkSelectable <

关注

专栏目录