el-table 怎么禁止checkbox
时间: 2023-10-17 15:03:52 浏览: 96
详解element-ui表格中勾选checkbox,高亮当前行
5星 · 资源好评率100%
如果你使用的是 Element UI 的 el-table 组件,并且想要禁用 checkbox,可以通过设置 `disabled` 属性来实现。
示例代码:
```html
<el-table :data="tableData">
<el-table-column type="selection" width="55">
<template slot-scope="scope">
<el-checkbox :disabled="true" v-model="scope.row.checked"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
```
在上面的代码中,我们在 el-checkbox 上设置了 `disabled` 属性,这样就可以禁用 checkbox 了。同时,我们还通过 `v-model` 绑定了 `scope.row.checked`,这样可以记录每一行是否被选中。
另外,我们还需要在表格的数据中添加一个 `checked` 字段,用来保存每一行是否被选中的状态。
示例代码:
```js
data() {
return {
tableData: [
{ name: 'John', age: 28, checked: false },
{ name: 'Bob', age: 32, checked: false },
{ name: 'Alice', age: 24, checked: false },
]
}
}
```
这样,就可以实现禁用 el-table 中的 checkbox 功能了。
阅读全文