手把手教你实现一个Vue无限级联树形表格（增删改）

前言

平时我们可能在做项目时，会遇到一个业务逻辑。实现一个无限级联树形表格，什么叫做无限级联树形表格呢？就是下图所展示的内容，有一个祖元素，然后下面可能有很多子孙元素，你可以实现添加、编辑、删除这样几个功能。

资源

    JavaScript框架：vue.js
    UI框架：Element UI

源码

这里需要重点说明的是，主要使用了递归的算法以及给数据标识的重要性。详细说明可以在源码中查看注释，也可以通过删改代码融会贯通。

<template>
    <div class="container">
        <div class="btn-r">
            <el-button
                type="primary"
                size="small"
                @click="addView = true"
                icon="el-icon-circle-plus-outline"
                class="add"
                >添加</el-button
            >
        </div>
        <el-table
            :data="tableData"
            style="width: 100%; margin-bottom: 20px"
            row-key="value"
            border
            default-expand-all
            size="medium"
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
            <el-table-column prop="label" label="名称" sortable>
            </el-table-column>
            <el-table-column label="操作" align="center" width="180">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        size="small"
                        @click="handleClick(scope.row, scope.$index)"
                        >编辑</el-button
                    >
                    <el-button
                        type="text"
                        size="small"
                        @click="deleteClick(scope.row, scope.$index)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <!-- 添加窗口 -->
        <el-dialog
            title="添加"
            :visible.sync="addView"
            :close-on-click-modal="false"
            width="30%"
            @close="closeView"
        >
            <el-form :model="form" ref="form" :rules="rules">
                <el-form-item
                    label="位置"
                    :label-width="formLabelWidth"
                    prop="location"
                >
                    <el-select
                        v-model="form.location"
                        placeholder="请选择位置"
                        @change="locationChange"
                        size="small"
                    >
                        <el-option
                            v-for="item in locationData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    v-if="sonStatus"
                    label="子位置"
                    :label-width="formLabelWidth"
                    prop="childArr"
                >
                    <el-cascader
                        size="small"
                        :key="isResouceShow"
                        v-model="form.childArr"
                        placeholder="请选择子位置"
                        :label="'name'"
                        :value="'id'"
                        :options="tableData"
                        :props="{ checkStrictly: true }"
                        clearable
                        @change="getCasVal"
                    ></el-cascader>
                </el-form-item>
                <el-form-item
                    label="名称"
                    :label-width="formLabelWidth"
                    prop="label"
                >
                    <el-input
                        v-model="form.label"
                        size="small"
                        autocomplete="off"
                        placeholder="请输入名称"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addView = false" size="small"
                    >取 消</el-button
                >
                <el-button type="primary" @click="okAdd('form')" size="small"
                    >确 定</el-button
                >
            </span>
        </el-dialog>

        <!-- 编辑窗口 -->
        <el-dialog
            title="编辑"
            :visible.sync="editView"
            :close-on-click-modal="false"
            width="30%"
        >
            <el-form :model="data" ref="data" :rules="rules">
                <el-form-item
                    label="位置"
                    :label-width="formLabelWidth"
                    prop="location"
                >
                    <el-select
                        v-model="data.location"
                        placeholder="请选择位置"
                        size="small"
                        @change="locationChange"
                    >
                        <el-option
                            v-for="item in locationData"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item
                    v-if="sonStatus"
                    label="子位置"
                    :label-width="formLabelWidth"
                    prop="childArr"
                >
                    <el-cascader
                        :key="isResouceShow"
                        v-model="data.childArr"
                        placeholder="请选择子位置"
                        size="small"
                        :label="'name'"
                        :value="'id'"
                        :options="tableData"
                        :props="{ checkStrictly: true }"
                        clearable
                        @change="getCasVal"
                    ></el-cascader>
                </el-form-item>
                <el-form-item
                    label="名称"
                    :label-width="formLabelWidth"
                    prop="label"
                >
                    <el-input
                        v-model="data.label"
                        autocomplete="off"
                        placeholder="请输入名称"
                        size="small"
                    ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editView = false" size="small"
                    >取 消</el-button
                >
                <el-button type="primary" @click="okEdit('data')" size="small"
                    >确 定</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'Tag',
    data() {
        return {
            location: '',
            isResouceShow: 1,
            addView: false,
            sonStatus: false,
            editView: false,
            casArr: [],
            childArr: [],
            form: {},
            data: {},
            idx: '',
            childkey: [],
            formLabelWidth: '80px',
            rules: {
                label: [
                    { required: true, message: '请输入名称', trigger: 'blur' }
                ]
            },
            locationData: [
                {
                    id: 1,
                    name: '顶'
                },
                {
                    id: 2,
                    name: '子'
                }
            ],
            tableData: []
        };
    },
    methods: {
        // 监听关闭窗口
        closeView() {
            this.$refs['form'].resetFields(); // 关闭窗口，清空填写的内容
        },
        // 打开编辑
        handleClick(item, index) {
            item.value.length != 1
                ? (this.sonStatus = true)
                : (this.sonStatus = false);
            this.editView = true;
            const obj = Object.assign({}, item);
            this.childkey = item.childkey;
            this.casArr = item.childArr;
            this.idx = index;
            this.data = obj;
        },
        // 递归表格数据(编辑)
        findSd(arr, i, casArr) {
            if (i == casArr.length - 1) {
                let index = casArr[i].substr(casArr[i].length - 1, 1);
                return arr.splice(index, 1, this.data);
            } else {
                return this.findSd(
                    arr[casArr[i].substr(casArr[i].length - 1, 1)].children,
                    (i += 1),
                    casArr
                );
            }
        },
        // 确定编辑
        okEdit(data) {
            this.$refs[data].validate(valid => {
                if (valid) {
                    if (this.data.value.length == 1) {
                        this.tableData.splice(this.idx, 1, this.data);
                        this.$message({
                            type: 'success',
                            message: '编辑成功'
                        });
                        this.editView = false;
                    } else {
                        this.findSd(this.tableData, 0, this.childkey);
                        this.$message({
                            type: 'success',
                            message: '编辑成功'
                        });
                        this.editView = false;
                    }
                } else {
                    return false;
                }
            });
        },
        // 递归表格数据(删除)
        findDel(arr, i, item) {
            let casArr = item.childkey;
            if (i == casArr.length - 1) {
                let index = casArr[i].substr(casArr[i].length - 1, 1);
                return arr.splice(index, 1);
            } else {
                return this.findDel(
                    arr[casArr[i].substr(casArr[i].length - 1, 1)].children,
                    (i += 1),
                    item
                );
            }
        },
        // 删除
        deleteClick(item) {
            this.$confirm(`此操作将删除该项, 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    if (item.children.length != 0) {
                        this.$message.warning({
                            message: '请删除子节点',
                            duration: 1000
                        });
                    } else {
                        this.casArr = item.childArr;
                        ++this.isResouceShow; // 给级联控件绑定一个key，防止报错。
                        if (item.value.length == 1) { // 删除的是顶节点
                            console.log(1);
                            this.tableData.splice(item.value, 1);
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                        } else { // 删除的是子节点
                            console.log(2);
                            this.findDel(this.tableData, 0, item);
                            this.$message({
                                type: 'success',
                                message: '删除成功'
                            });
                        }
                    }
                })
                .catch(err => {
                    console.log(err);
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        // 是否显示次位置
        locationChange(v) {
            if (v == 2) {
                this.sonStatus = true;
            } else {
                this.sonStatus = false;
            }
        },
        // 获取次位置
        getCasVal(v) {
            this.casArr = v;
            this.form.childArr = v;
        },
        // 递归表格数据(添加)
        find(arr, i) {
            if (i == this.casArr.length - 1) {
                return arr[this.casArr[i].substr(this.casArr[i].length - 1, 1)]
                    .children;
            } else {
                return this.find(
                    arr[this.casArr[i].substr(this.casArr[i].length - 1, 1)]
                        .children,
                    (i += 1)
                );
            }
        },
        // 确定添加
        okAdd(form) {
            this.$refs[form].validate(valid => {
                if (valid) {
                    if (this.sonStatus == false) {
                        this.form.value = String(this.tableData.length);
                        const obj = Object.assign({}, this.form);
                        obj.children = [];
                        obj.childArr = [];
                        this.tableData.push(obj);
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                        this.addView = false;
                    } else {
                        let arr = this.find(this.tableData, 0);
                        this.childArr = [...this.casArr, String(arr.length)];
                        this.form.value =
                            String(this.casArr[this.casArr.length - 1]) +
                            String(arr.length);
                        delete this.form.children;
                        const obj = Object.assign({}, this.form);
                        obj.children = [];
                        obj.childkey = [...this.casArr, String(arr.length)];
                        arr.push(obj);
                        this.$message({
                            type: 'success',
                            message: '添加成功'
                        });
                        this.addView = false;
                    }
                } else {
                    return false;
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item__content {
    width: 203px;
}
</style>

作者：Vam的金豆之路

主要领域：前端开发

我的微信：maomin9761

微信公众号：前端历劫之路