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

一时失言乱红尘 2021-09-03 08:34 463阅读 0赞

## 前言 ##

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

![861265f2524fd2b582a200858145165d.png][]

## 资源 ##

*  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>

## 结语 ##

>  *  欢迎关注我的公众号**前端历劫之路**
>  *  回复关键词**电子书**，即可获取12本前端热门电子书。
>  *  回复关键词**红宝书第4版**，即可获取最新《JavaScript高级程序设计》（第四版）电子书。
>  *  关注公众号后，点击下方菜单即可加我微信，我拉拢了很多IT大佬，创建了一个技术交流、文章分享群，期待你的加入。
>  *  作者：**Vam的金豆之路**
>  *  微信公众号：**前端历劫之路**
> 
> ![Image 1][]

[861265f2524fd2b582a200858145165d.png]: /images/20210813/a7e2a60efb64414aabc69ed4916895d6.png
[Image 1]: