vue table树形数据 多选，分页多选，数据保存 实现逻辑

vue table树形数据 多选，分页多选留存, 实现逻辑

如上图所示，vue table 的多选是不能选中子级的。上面是我重写后的效果。

实现逻辑有很多种，我直接使用checkbox 组件。

以下只写出实现逻辑，具体的数据结构，不赘述了，直接抄官网即可

1. 首列直接显示全选checkbox，以及每列开头的checkbox

<template>
    <el-table-column prop="id" label="全选" width="120">
        <template slot="header">
            <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        </template>
        <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isSelect" @change="(checked) => handleChecked(checked, scope.row)">{{
                scope.row.id }}</el-checkbox>
        </template>
    </el-table-column>
</template>

2. js 实现逻辑

• 获取树形数据，遍历，添加是否选中的字段。目的是重新加载列表，已选中的渲染
• 处理全选，单独选中，取消的逻辑。主要的是，不管是全选和单个选中，都需要处理子级数据。
• 处理选中时，有保存选中的逻辑，方便分页后，能正常渲染已选中。
• 我的树形只有二级，处理子级时，直接就遍历了，如果大家是多级，需要自己优化成 递归写法。正常够用

<script>
export default {
    data() {
        return {
            tableData: [],
            select_row: [],
            selectData: [],
        };
    },
    methods: {
        getList() {
            this.loading = true;
            orderWorkList({
                page: this.pageParam.page,
                perPage: this.pageParam.size,
            }).then((res) => {
                let tableData = res.data.list;

                //添加一个是否选中的属性
                tableData.forEach((item, index) => {
                    item.isSelect = this.select_row && this.select_row.indexOf(item.id) > -1 ? true : false;
                    if (item.child_many && item.child_many.length > 0) {
                        item.child_many.map(itemChild => {
                            itemChild.isSelect = this.select_row && this.select_row.indexOf(itemChild.id) > -1 ? true : false;
                            return itemChild;
                        });
                    }
                });
                this.loading = false;
            });
        },
        //全选
        handleCheckAllChange(checked) {
            this.tableData.forEach(item => {
                item = this.handleSelect(item, checked)
            });
        },
        //单选每条
        handleChecked(checked, row) {
            this.handleSelect(row, checked)
            this.handleParentChecked(row);
            //this.saveCheckdata();
        },
        //checkbox选中处理子级
        handleSelect(row, checked) {
            row.isSelect = checked ? true : false;

            this.saveCheckdata(row);

            if (row.child_many && row.child_many.length > 0) {
                row.child_many.forEach(itemChild => {
                    itemChild.isSelect = checked ? true : false;

                    this.saveCheckdata(itemChild);

                    return itemChild;
                });
            }
            return row;
        },
        //保存选择的数据
        saveCheckdata(item) {
            if (item.isSelect) {
                this.selectData.push(item);
            } else {
                let index = this.selectData.findIndex(row => row.id == item.id);
                if (index > -1) {
                    this.selectData.splice(index, 1);
                }
            }
        },
        //当所有子节点取消选中，父节点也要取消选中；当所有子节点已选中，父节点也要相应选中
        handleParentChecked(row) {
            this.tableData.forEach(item => {
                if (item.child_many && item.child_many.length > 0 && row.fid == item.id) {
                    let rowParentFlag = true;
                    item.child_many.forEach(itemChild => {
                        rowParentFlag = itemChild.isSelect && rowParentFlag;
                    });
                    item.isSelect = rowParentFlag;

                    return item;
                }
            });
        },
    }
}
</script>

逻辑很简单，说白了就是玩数据。

选中父级，然后处理子级状态。

子级数据变动后，然后看看父级是否有影响。

遇到了，我就写下，供大家参考参考。欢迎大家评论，留言。