前言

平時我們可能在做專案時，會遇到一個業務邏輯。實現一個無限級聯樹形表格，什麼叫做無限級聯樹形表格呢？就是下圖所展示的內容，有一個祖元素，然後下面可能有很多子孫元素，你可以實現新增、編輯、刪除這樣幾個功能。
在這裡插入圖片描述

資源

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"
                >
更多內容請見原文，原文轉載自：

https://blog.csdn.net/weixin_44519496/article/details/118755806