vue怎么把表格当前行的下拉数据禁用
时间: 2024-03-16 22:41:50 浏览: 83
你可以在表格的 `row` 中添加一个属性来表示当前行是否禁用下拉数据,然后在下拉数据的 `disabled` 属性中绑定该属性即可。具体实现方式如下:
1. 在表格的 `columns` 中添加下拉数据列,并在 `scopedSlots` 中定义该列的下拉数据模板。
```html
<el-table-column label="下拉数据" prop="dropdown">
<template slot-scope="scope">
<el-select v-model="scope.row.dropdown" :disabled="scope.row.disableDropdown">
<el-option label="选项一" value="option1"></el-option>
<el-option label="选项二" value="option2"></el-option>
<el-option label="选项三" value="option3"></el-option>
</el-select>
</template>
</el-table-column>
```
2. 在表格的 `data` 中添加 `disableDropdown` 属性,并在需要禁用下拉数据的行中将该属性设置为 `true`。
```js
data: [
{
name: '张三',
age: 18,
dropdown: 'option1',
disableDropdown: false
},
{
name: '李四',
age: 20,
dropdown: 'option2',
disableDropdown: true // 禁用下拉数据
}
]
```
这样,当 `disableDropdown` 属性为 `true` 时,当前行的下拉数据就会被禁用。
阅读全文