el-table 多选部分不可选
时间: 2023-10-02 20:05:24 浏览: 144
关于多选框的全选和全不选
你可以通过配置 `el-table` 的 `disabled` 属性来实现多选部分不可选的效果。首先,你需要为每一行的数据对象添加一个 `disabled` 字段,用于控制该行是否可选。然后,在 `el-table-column` 组件中使用 `scoped-slot` 来自定义列的内容,并根据 `disabled` 字段的值来决定是否禁用复选框。
以下是一个示例代码:
```html
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column type="selection" :selectable="selectable">
<template slot-scope="{ row }">
<el-checkbox :disabled="row.disabled" v-model="selection"></el-checkbox>
</template>
</el-table-column>
<!-- 其他列 -->
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'Item 1', disabled: false },
{ name: 'Item 2', disabled: true },
{ name: 'Item 3', disabled: false },
// 其他数据行
],
selection: []
};
},
methods: {
selectable(row) {
return !row.disabled;
}
}
};
</script>
```
在上述示例中,`tableData` 数组包含了表格的数据,每一行数据对象都有一个 `disabled` 字段来表示该行是否可选。在 `el-table-column` 组件中,使用 `selectable` 属性来设置是否可选,通过 `scoped-slot` 来自定义列的内容,并根据 `row.disabled` 的值来决定是否禁用复选框。最终,选中的行数据会保存在 `selection` 数组中。
这样配置后,`el-table` 的多选部分中的禁用行将无法被选中。
阅读全文