elementUI的表格多选功能之规定禁止选择

原创于 2021-06-07 11:18:28 发布 · 4.5k 阅读

7 ·

CC 4.0 BY-SA版权

vue+elementUI的组件变化使用专栏收录该内容

21 篇文章

订阅专栏

在前端开发中，使用ElementUI的el-table组件时，有时需要实现部分行不可选择的功能。通过设置`selectable`属性，可以根据具体条件禁用表格的多选框。例如，当表格数据中的某一行的`pro_status`属性等于'review'时，该行的多选框将被禁用。以下是实现这一功能的代码示例：包括在表格中添加`selectable`属性，并定义其返回值函数，以控制行的可选状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

elementUI的el-table表格多选功能之禁用多选

在进行表格的多选的时候我们会碰到那种，只允许部分内容可以被选择，不符合的要禁用多选框，这个时候就要用到elementUI el-table的selectable

在这里插入图片描述

所以我们可以这样写

<el-table :data="tableData" border v-loading='loading' size="small" @selection-change="handleSelectionChange">
    <el-table-column v-if="type==='admin'" type="selection" :selectable="selectable" width="55"></el-table-column>
    <el-table-column label="状态" prop="tips" width="150"></el-table-column>
</el-table>

selectable(row,index) {
    return row.pro_status === 'review' //通过某个值来进行判断，规定那一行的选择框被禁用
}