elementui树形表格去除第一节点的复选框
时间: 2023-10-14 14:03:35 浏览: 89
vuejs+element UI table表格中实现禁用部分复选框的方法
要去除 element-ui 树形表格的第一节点的复选框,可以使用 `show-checkbox` 属性和 `render-header` 属性。具体实现方法如下:
1. 在 `el-table` 中设置 `show-checkbox` 属性为 `true`,表示显示复选框。
2. 在 `el-table-column` 中设置 `render-header` 属性,并定义一个方法,在方法中返回一个 `th` 元素,将第一个 `th` 元素中的复选框去除即可。
示例代码如下:
```html
<template>
<el-table :data="tableData" show-checkbox>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
<el-table-column prop="phone" label="电话"></el-table-column>
<el-table-column prop="email" label="邮箱"></el-table-column>
<el-table-column :render-header="renderHeader" label="操作"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
id: 1,
name: '张三',
age: 18,
address: '北京市',
phone: '13888888888',
email: 'zhangsan@qq.com'
},
{
id: 2,
name: '李四',
age: 20,
address: '上海市',
phone: '13999999999',
email: 'lisi@qq.com'
},
{
id: 3,
name: '王五',
age: 22,
address: '广州市',
phone: '13666666666',
email: 'wangwu@qq.com'
}
]
}
},
methods: {
renderHeader(h) {
return h('th', [
h('span', '操作')
])
}
}
}
</script>
```
在上述代码中,我们定义了一个 `renderHeader` 方法,返回一个 `th` 元素,将第一个 `th` 元素中的复选框去除。
阅读全文