前言
平时我们可能在做项目时，会遇到一个业务逻辑。实现一个无限级联树形表格，什么叫做无限级联树形表格呢？就是下图所展示的内容，有一个祖元素，然后下面可能有很多子孙元素，你可以实现添加、编辑、删除这样几个功能。
资源
代码语言：javascript复制JavaScript框架：vue.js
UI框架：Element UI
12源码
这里需要重点说明的是，主要使用了递归的算法以及给数据标识的重要性。详细说明可以在源码中查看注释，也可以通过删改代码融会贯通。
代码语言：javascript复制<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
