el-table 单独禁用第一行
时间: 2023-08-08 12:14:16 浏览: 91
可以通过以下方式禁用 el-table 的第一行:
1. 在 el-table 中的第一行设置 `disabled` 属性,如下所示:
```
<el-table :data="tableData">
<el-table-column prop="name" label="Name" :disabled="disabledRows.indexOf(0) !== -1"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
```
在这个例子中,我们给第一列设置了 `:disabled` 属性,并且判断 `disabledRows` 数组中是否包含 `0`,如果包含则禁用第一列。
2. 通过 `row-class-name` 属性给第一行设置一个特殊的样式类名,然后通过 CSS 控制该行的样式,如下所示:
```
<el-table :data="tableData" :row-class-name="getRowClassName">
<el-table-column prop="name" label="Name"></el-table-column>
<el-table-column prop="age" label="Age"></el-table-column>
</el-table>
...
data() {
return {
disabledRows: [0]
}
},
methods: {
getRowClassName({rowIndex}) {
return this.disabledRows.indexOf(rowIndex) !== -1 ? 'disabled-row' : ''
}
}
```
在这个例子中,我们给 el-table 设置了 `:row-class-name` 属性,并且通过 `getRowClassName` 方法判断当前行是否为第一行,如果是则返回一个特殊的样式类名 `disabled-row`,然后通过 CSS 控制该行的样式。
阅读全文