美文网首页vue
ElementUI 表格 全选 未选中子级节点

ElementUI 表格 全选 未选中子级节点

作者: Cherry丶小丸子 | 来源:发表于2022-03-27 15:40 被阅读0次
<el-table 
    :data="tableData"
    ref="table"
    row-key="id"
    default-expand-all border
    @select="select"
    @select-all="selectAll"
    @selection-change="selectionChange">
    <el-table-column width="30" align="center"></el-table-column>
    <el-table-column type="selection" width="50" align="center"></el-table-column>
    <el-table-column prop="date" label="日期" width="150" align="center"></el-table-column>
    <el-table-column prop="name" label="姓名" width="120" align="center"></el-table-column>
    <el-table-column prop="address" label="地址" align="center" show-overflow-tooltip></el-table-column>
</el-table>

data(){
    tableData: [{
        id: '1',
        date: '2016-05-03',
        name: '汪洋',
        address: '上海市普陀区金沙江路 1518 弄',
        children: [{
            id: '1-1',
            date: '2016-05-03',
            name: '汪洋1',
            address: '上海市普陀区金沙江路 1518 弄',
        }]
    }, {
        id: '2',
        date: '2016-05-02',
        name: '陈茜',
        address: '上海市普陀区金沙江路 1518 弄'
    }, {
        id: '3',
        date: '2016-05-04',
        name: '李庆',
        address: '上海市普陀区金沙江路 1518 弄'
    }, {
        id: '4',
        date: '2016-05-01',
        name: '宋洁洁',
        address: '上海市普陀区金沙江路 1518 弄'
    }, {
        id: '5',
        date: '2016-05-08',
        name: '陈汉芙',
        address: '上海市普陀区金沙江路 1518 弄'
    }, {
        id: '6',
        date: '2016-05-06',
        name: '庞瑞楠',
        address: '上海市普陀区金沙江路 1518 弄'
    }, {
        id: '7',
        date: '2016-05-07',
        name: '刘兴博',
        address: '上海市普陀区金沙江路 1518 弄'
    }],
    isAllSelection: false
}

methods: {
    /**
     * 当用户手动勾选 数据行的 Checkbox 时触发的事件
     * @param {Object} selection
     * @param {Object} row
     */
    select(selection, row){},
    /**
     * 当用户手动勾选 全选 Checkbox 时触发的事件
     * @param {Object} selection
     */
    selectAll(selection){
        this.isAllSelection = !this.isAllSelection;
        this.toggleSelectionRecursion(this.tableData, this.isAllSelection);
    },
    /**
     * 当选择项发生变化时会触发该事件
     * @param {Object} selection
     */
    selectionChange(selection){},
    /**
     * 递归-----表格所有节点(包括子节点)的选中与否
     * @param {Object} data
     * @param {Object} isAllSelection
     */
    toggleSelectionRecursion(data, isAllSelection) {
        data.map((item, index) => {
            this.$refs.table.toggleRowSelection(item, isAllSelection);
            if(item.children && item.children.length != 0){
                this.toggleSelectionRecursion(item.children, isAllSelection);
            }
        });
    }

}

相关文章

网友评论

    本文标题:ElementUI 表格 全选 未选中子级节点

    本文链接:https://www.haomeiwen.com/subject/jvfyjrtx.html