Vue中怎么实现一个无限级联树形表格

这篇文章给大家介绍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>

关于Vue中怎么实现一个无限级联树形表格就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。