如何禁用 el-table 单独某一行
时间: 2023-08-11 11:44:34 浏览: 798
你可以在数据源中给需要禁用的行添加一个自定义属性,例如`disabled:true`,然后在渲染每一行时,通过`row-class-name`属性来判断是否添加禁用样式,示例代码如下:
```html
<template>
<el-table :data="tableData" row-class-name="table-row-disabled">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 18, disabled: true },
{ name: '李四', age: 20, disabled: false },
{ name: '王五', age: 22, disabled: false },
],
};
},
};
</script>
<style>
.table-row-disabled {
pointer-events: none;
opacity: 0.5;
}
</style>
```
在这个示例中,我们在数据源中给第一行添加了`disabled:true`属性,然后在渲染每一行时,通过`row-class-name`属性来判断是否添加禁用样式,禁用样式中设置了`pointer-events:none`和`opacity:0.5`,使得该行不可点击并且透明度降低,达到了禁用的效果。
阅读全文