如何将el-table中一条数据的按钮禁用
时间: 2024-01-22 10:19:54 浏览: 167
你可以通过给 el-table-column 组件中的按钮添加一个 `:disabled` 属性,来动态控制按钮是否禁用。具体的做法如下:
1. 在 el-table-column 组件中添加一个按钮,并将按钮的禁用状态绑定到该行数据的一个属性上,例如:
```
<el-table-column label="操作">
<template slot-scope="scope">
<el-button :disabled="scope.row.disabled" @click="handleClick(scope.row)">点击</el-button>
</template>
</el-table-column>
```
2. 在获取数据的时候,在每一行数据中添加一个 `disabled` 属性,例如:
```
data() {
return {
tableData: [
{ name: '张三', age: 18, disabled: true },
{ name: '李四', age: 20, disabled: false },
{ name: '王五', age: 22, disabled: true }
]
}
}
```
3. 在需要动态控制按钮禁用状态的时候,修改对应行数据的 `disabled` 属性即可,例如:
```
this.tableData[index].disabled = true;
```
这样就可以通过修改数据的 `disabled` 属性来动态控制 el-table 中某一行的按钮是否禁用了。
阅读全文