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

马克社区

发布于 2022-05-11 13:45:27

1.6K08

代码可运行

文章被收录于专栏：高端IT高端IT

运行总次数：8

代码可运行

前言

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

资源

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

源码

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

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