el-table怎么禁止某一行不可勾选,disabled属性不起作用
时间: 2024-05-11 09:18:05 浏览: 184
基于js disabled="false"不起作用的解决办法
您好,对于el-table组件中某一行禁止勾选的问题,可以通过以下两种方式实现:
1. 在row或者cell的自定义模板中,通过控制checkbox的disabled属性来禁用某一行的勾选:
```
<template>
<el-table ...>
<el-table-column type="selection" width="55">
<template slot-scope="{row}">
<el-checkbox :disabled="row.disabled" v-model="selection" />
</template>
</el-table-column>
...
</el-table>
</template>
```
```
<script>
export default {
data() {
return {
selection: [],
tableData: [
{
name: 'John Brown',
age: 18,
disabled: true // 禁用
},
{
name: 'Jim Green',
age: 24,
disabled: false // 可选
},
...
]
}
}
}
</script>
```
2. 在row中定义selectable为false,表示不可选择该行:
```
<template>
<el-table :data="tableData" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" />
<el-table-column prop="name" label="姓名" />
<el-table-column prop="age" label="年龄" />
</el-table>
</template>
```
```
<script>
export default {
data() {
return {
tableData: [
{
name: 'John Brown',
age: 18,
selectable: false // 不可选
},
{
name: 'Jim Green',
age: 24,
selectable: true // 可选
},
...
]
}
},
methods: {
handleSelectionChange(val) {
console.log(val)
}
}
}
</script>
```
希望这些示例代码能够帮助您解决问题。任何问题都可以继续向我提问。
阅读全文