elementui 的el-table设置不可勾选
在Element UI的el-table
组件中,如果你想设置某些行为不可勾选,可以使用row-key
属性结合selectable
属性或方法。
selectable
属性可以设置为一个方法,该方法会传入一个参数:当前行数据对象,返回true
或false
来决定该行是否可以被选择。
下面是一个例子:
<template>
<el-table
:data="tableData"
row-key="id"
:selectable="checkSelectable"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<!-- 其他列 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 1, name: 'John', age: 28 },
{ id: 2, name: 'Jane', age: 23 },
{ id: 3, name: 'Smith', age: 32 }
],
multipleSelection: []
};
},
methods: {
checkSelectable(row) {
// 如果想禁用id为2的行的勾选功能,可以这样写
return row.id !== 2;
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
};
</script>
在这个例子中,checkSelectable
方法返回false
时,表示该行不可被选择。这里假设了每个数据对象都有一个唯一的id
属性,并且row-key
属性被设置为"id"
。如果你的数据结构中用来标识唯一性的字段不是id
,请相应地修改row-key
的值。
评论已关闭