ElementuUI el-table 树型表格 checkbox多选框选择逻辑
如图所示:
逻辑:
子节点全部选择 => 父节点选择
子节点部分选择 => 父节点半选择
子节点全未选择 => 父节点不选择
代码部分如下:
<template>
<div class="container">
<el-table
:data="tableData"
border
style="width: 100%"
row-key="id"
default-expand-all
:tree-props="{ children: 'children' ,hasChildren: 'children.length>0'}"
ref="tableRef"
@select="handletableSelect"
@select-all="handletableSelectAll"
@selection-change="handletableSelectionChange">
<!-- 多选框列 -->
<el-table-column
type="selection"/>
<!--
id列 注意:该列很重要,必须是row-key 若不需要展示该列,
则需要通过其他手段在行内标记row-key并自行修改
updateCheckboxIndeterminate方法里的逻辑
下边“半选择”状态需要用到
-->
<el-table-column
prop="id"
label="id"
></el-table-column>
<!-- ...其他字段 -->
</el-table>
</div>
</template>
<script>
export default {
name: "TreeTableCheckbox",
data() {
return {
tableData: [
{
id: 1,
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 3