自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

手把手教你實(shí)現(xiàn)一個Vue無限級聯(lián)樹形表格（增刪改）

作者： maomin9761
開發(fā) 前端
實(shí)現(xiàn)一個無限級聯(lián)樹形表格，什么叫做無限級聯(lián)樹形表格呢?就是下圖所展示的內(nèi)容，有一個祖元素，然后下面可能有很多子孫元素，你可以實(shí)現(xiàn)添加、編輯、刪除這樣幾個功能。

[[355275]]

本文轉(zhuǎn)載自微信公眾號「 前端歷劫之路」，作者maomin9761。轉(zhuǎn)載本文請聯(lián)系 前端歷劫之路公眾號。

前言

平時我們可能在做項(xiàng)目時，會遇到一個業(yè)務(wù)邏輯。實(shí)現(xiàn)一個無限級聯(lián)樹形表格，什么叫做無限級聯(lián)樹形表格呢?就是下圖所展示的內(nèi)容，有一個祖元素，然后下面可能有很多子孫元素，你可以實(shí)現(xiàn)添加、編輯、刪除這樣幾個功能。

資源

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

源碼

這里需要重點(diǎn)說明的是，主要使用了遞歸的算法以及給數(shù)據(jù)標(biāo)識的重要性。詳細(xì)說明可以在源碼中查看注釋，也可以通過刪改代碼融會貫通。

  1. <template> 
  2.     <div class="container"> 
  3.         <div class="btn-r"> 
  4.             <el-button 
  5.                 type="primary" 
  6.                 size="small" 
  7.                 @click="addView = true" 
  8.                 icon="el-icon-circle-plus-outline" 
  9.                 class="add" 
  10.                 >添加</el-button 
  11.             > 
  12.         </div> 
  13.         <el-table 
  14.             :data="tableData" 
  15.             style="width: 100%; margin-bottom: 20px" 
  16.             row-key="value" 
  17.             border 
  18.             default-expand-all 
  19.             size="medium" 
  20.             :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" 
  21.         > 
  22.             <el-table-column prop="label" label="名稱" sortable> 
  23.             </el-table-column> 
  24.             <el-table-column label="操作" align="center" width="180"> 
  25.                 <template slot-scope="scope"> 
  26.                     <el-button 
  27.                         type="text" 
  28.                         size="small" 
  29.                         @click="handleClick(scope.row, scope.$index)" 
  30.                         >編輯</el-button 
  31.                     > 
  32.                     <el-button 
  33.                         type="text" 
  34.                         size="small" 
  35.                         @click="deleteClick(scope.row, scope.$index)" 
  36.                         >刪除</el-button 
  37.                     > 
  38.                 </template> 
  39.             </el-table-column> 
  40.         </el-table> 
  41.  
  42.         <!-- 添加窗口 --> 
  43.         <el-dialog 
  44.             title="添加" 
  45.             :visible.sync="addView" 
  46.             :close-on-click-modal="false" 
  47.             width="30%" 
  48.             @close="closeView" 
  49.         > 
  50.             <el-form :model="form" ref="form" :rules="rules"> 
  51.                 <el-form-item 
  52.                     label="位置" 
  53.                     :label-width="formLabelWidth" 
  54.                     prop="location" 
  55.                 > 
  56.                     <el-select 
  57.                         v-model="form.location" 
  58.                         placeholder="請選擇位置" 
  59.                         @change="locationChange" 
  60.                         size="small" 
  61.                     > 
  62.                         <el-option 
  63.                             v-for="item in locationData" 
  64.                             :key="item.id" 
  65.                             :label="item.name" 
  66.                             :value="item.id" 
  67.                         /> 
  68.                     </el-select> 
  69.                 </el-form-item> 
  70.                 <el-form-item 
  71.                     v-if="sonStatus" 
  72.                     label="子位置" 
  73.                     :label-width="formLabelWidth" 
  74.                     prop="childArr" 
  75.                 > 
  76.                     <el-cascader 
  77.                         size="small" 
  78.                         :key="isResouceShow" 
  79.                         v-model="form.childArr" 
  80.                         placeholder="請選擇子位置" 
  81.                         :label="'name'" 
  82.                         :value="'id'" 
  83.                         :options="tableData" 
  84.                         :props="{ checkStrictly: true }" 
  85.                         clearable 
  86.                         @change="getCasVal" 
  87.                     ></el-cascader> 
  88.                 </el-form-item> 
  89.                 <el-form-item 
  90.                     label="名稱" 
  91.                     :label-width="formLabelWidth" 
  92.                     prop="label" 
  93.                 > 
  94.                     <el-input 
  95.                         v-model="form.label" 
  96.                         size="small" 
  97.                         autocomplete="off" 
  98.                         placeholder="請輸入名稱" 
  99.                     ></el-input> 
  100.                 </el-form-item> 
  101.             </el-form> 
  102.             <span slot="footer" class="dialog-footer"> 
  103.                 <el-button @click="addView = false" size="small" 
  104.                     >取 消</el-button 
  105.                 > 
  106.                 <el-button type="primary" @click="okAdd('form')" size="small" 
  107.                     >確 定</el-button 
  108.                 > 
  109.             </span> 
  110.         </el-dialog> 
  111.  
  112.         <!-- 編輯窗口 --> 
  113.         <el-dialog 
  114.             title="編輯" 
  115.             :visible.sync="editView" 
  116.             :close-on-click-modal="false" 
  117.             width="30%" 
  118.         > 
  119.             <el-form :model="data" ref="data" :rules="rules"> 
  120.                 <el-form-item 
  121.                     label="位置" 
  122.                     :label-width="formLabelWidth" 
  123.                     prop="location" 
  124.                 > 
  125.                     <el-select 
  126.                         v-model="data.location" 
  127.                         placeholder="請選擇位置" 
  128.                         size="small" 
  129.                         @change="locationChange" 
  130.                     > 
  131.                         <el-option 
  132.                             v-for="item in locationData" 
  133.                             :key="item.id" 
  134.                             :label="item.name" 
  135.                             :value="item.id" 
  136.                         /> 
  137.                     </el-select> 
  138.                 </el-form-item> 
  139.                 <el-form-item 
  140.                     v-if="sonStatus" 
  141.                     label="子位置" 
  142.                     :label-width="formLabelWidth" 
  143.                     prop="childArr" 
  144.                 > 
  145.                     <el-cascader 
  146.                         :key="isResouceShow" 
  147.                         v-model="data.childArr" 
  148.                         placeholder="請選擇子位置" 
  149.                         size="small" 
  150.                         :label="'name'" 
  151.                         :value="'id'" 
  152.                         :options="tableData" 
  153.                         :props="{ checkStrictly: true }" 
  154.                         clearable 
  155.                         @change="getCasVal" 
  156.                     ></el-cascader> 
  157.                 </el-form-item> 
  158.                 <el-form-item 
  159.                     label="名稱" 
  160.                     :label-width="formLabelWidth" 
  161.                     prop="label" 
  162.                 > 
  163.                     <el-input 
  164.                         v-model="data.label" 
  165.                         autocomplete="off" 
  166.                         placeholder="請輸入名稱" 
  167.                         size="small" 
  168.                     ></el-input> 
  169.                 </el-form-item> 
  170.             </el-form> 
  171.             <span slot="footer" class="dialog-footer"> 
  172.                 <el-button @click="editView = false" size="small" 
  173.                     >取 消</el-button 
  174.                 > 
  175.                 <el-button type="primary" @click="okEdit('data')" size="small" 
  176.                     >確 定</el-button 
  177.                 > 
  178.             </span> 
  179.         </el-dialog> 
  180.     </div> 
  181. </template> 
  182.  
  183. <script> 
  184. export default { 
  185.     name: 'Tag', 
  186.     data() { 
  187.         return { 
  188.             location: '', 
  189.             isResouceShow: 1, 
  190.             addView: false, 
  191.             sonStatus: false, 
  192.             editView: false, 
  193.             casArr: [], 
  194.             childArr: [], 
  195.             form: {}, 
  196.             data: {}, 
  197.             idx: '', 
  198.             childkey: [], 
  199.             formLabelWidth: '80px', 
  200.             rules: { 
  201.                 label: [ 
  202.                     { required: true, message: '請輸入名稱', trigger: 'blur' } 
  203.                 ] 
  204.             }, 
  205.             locationData: [ 
  206.                 { 
  207.                     id: 1, 
  208.                     name: '頂' 
  209.                 }, 
  210.                 { 
  211.                     id: 2, 
  212.                     name: '子' 
  213.                 } 
  214.             ], 
  215.             tableData: [] 
  216.         }; 
  217.     }, 
  218.     methods: { 
  219.         // 監(jiān)聽關(guān)閉窗口 
  220.         closeView() { 
  221.             this.$refs['form'].resetFields(); // 關(guān)閉窗口，清空填寫的內(nèi)容 
  222.         }, 
  223.         // 打開編輯 
  224.         handleClick(item, index) { 
  225.             item.value.length != 1 
  226.                 ? (this.sonStatus = true) 
  227.                 : (this.sonStatus = false); 
  228.             this.editView = true; 
  229.             const obj = Object.assign({}, item); 
  230.             this.childkey = item.childkey; 
  231.             this.casArr = item.childArr; 
  232.             this.idx = index; 
  233.             this.data = obj; 
  234.         }, 
  235.         // 遞歸表格數(shù)據(jù)(編輯) 
  236.         findSd(arr, i, casArr) { 
  237.             if (i == casArr.length - 1) { 
  238.                 let index = casArr[i].substr(casArr[i].length - 1, 1); 
  239.                 return arr.splice(index, 1, this.data); 
  240.             } else { 
  241.                 return this.findSd( 
  242.                     arr[casArr[i].substr(casArr[i].length - 1, 1)].children, 
  243.                     (i += 1), 
  244.                     casArr 
  245.                 ); 
  246.             } 
  247.         }, 
  248.         // 確定編輯 
  249.         okEdit(data) { 
  250.             this.$refs[data].validate(valid => { 
  251.                 if (valid) { 
  252.                     if (this.data.value.length == 1) { 
  253.                         this.tableData.splice(this.idx, 1, this.data); 
  254.                         this.$message({ 
  255.                             type: 'success', 
  256.                             message: '編輯成功' 
  257.                         }); 
  258.                         this.editView = false; 
  259.                     } else { 
  260.                         this.findSd(this.tableData, 0, this.childkey); 
  261.                         this.$message({ 
  262.                             type: 'success', 
  263.                             message: '編輯成功' 
  264.                         }); 
  265.                         this.editView = false; 
  266.                     } 
  267.                 } else { 
  268.                     return false; 
  269.                 } 
  270.             }); 
  271.         }, 
  272.         // 遞歸表格數(shù)據(jù)(刪除) 
  273.         findDel(arr, i, item) { 
  274.             let casArr = item.childkey; 
  275.             if (i == casArr.length - 1) { 
  276.                 let index = casArr[i].substr(casArr[i].length - 1, 1); 
  277.                 return arr.splice(index, 1); 
  278.             } else { 
  279.                 return this.findDel( 
  280.                     arr[casArr[i].substr(casArr[i].length - 1, 1)].children, 
  281.                     (i += 1), 
  282.                     item 
  283.                 ); 
  284.             } 
  285.         }, 
  286.         // 刪除 
  287.         deleteClick(item) { 
  288.             this.$confirm(`此操作將刪除該項(xiàng), 是否繼續(xù)?`, '提示', { 
  289.                 confirmButtonText: '確定', 
  290.                 cancelButtonText: '取消', 
  291.                 type: 'warning' 
  292.             }) 
  293.                 .then(() => { 
  294.                     if (item.children.length != 0) { 
  295.                         this.$message.warning({ 
  296.                             message: '請刪除子節(jié)點(diǎn)', 
  297.                             duration: 1000 
  298.                         }); 
  299.                     } else { 
  300.                         this.casArr = item.childArr; 
  301.                         ++this.isResouceShow; // 給級聯(lián)控件綁定一個key，防止報(bào)錯。 
  302.                         if (item.value.length == 1) { // 刪除的是頂節(jié)點(diǎn) 
  303.                             console.log(1); 
  304.                             this.tableData.splice(item.value, 1); 
  305.                             this.$message({ 
  306.                                 type: 'success', 
  307.                                 message: '刪除成功' 
  308.                             }); 
  309.                         } else { // 刪除的是子節(jié)點(diǎn) 
  310.                             console.log(2); 
  311.                             this.findDel(this.tableData, 0, item); 
  312.                             this.$message({ 
  313.                                 type: 'success', 
  314.                                 message: '刪除成功' 
  315.                             }); 
  316.                         } 
  317.                     } 
  318.                 }) 
  319.                 .catch(err => { 
  320.                     console.log(err); 
  321.                     this.$message({ 
  322.                         type: 'info', 
  323.                         message: '已取消刪除' 
  324.                     }); 
  325.                 }); 
  326.         }, 
  327.         // 是否顯示次位置 
  328.         locationChange(v) { 
  329.             if (v == 2) { 
  330.                 this.sonStatus = true; 
  331.             } else { 
  332.                 this.sonStatus = false; 
  333.             } 
  334.         }, 
  335.         // 獲取次位置 
  336.         getCasVal(v) { 
  337.             this.casArr = v; 
  338.             this.form.childArr = v; 
  339.         }, 
  340.         // 遞歸表格數(shù)據(jù)(添加) 
  341.         find(arr, i) { 
  342.             if (i == this.casArr.length - 1) { 
  343.                 return arr[this.casArr[i].substr(this.casArr[i].length - 1, 1)] 
  344.                     .children; 
  345.             } else { 
  346.                 return this.find( 
  347.                     arr[this.casArr[i].substr(this.casArr[i].length - 1, 1)] 
  348.                         .children, 
  349.                     (i += 1) 
  350.                 ); 
  351.             } 
  352.         }, 
  353.         // 確定添加 
  354.         okAdd(form) { 
  355.             this.$refs[form].validate(valid => { 
  356.                 if (valid) { 
  357.                     if (this.sonStatus == false) { 
  358.                         this.form.value = String(this.tableData.length); 
  359.                         const obj = Object.assign({}, this.form); 
  360.                         obj.children = []; 
  361.                         obj.childArr = []; 
  362.                         this.tableData.push(obj); 
  363.                         this.$message({ 
  364.                             type: 'success', 
  365.                             message: '添加成功' 
  366.                         }); 
  367.                         this.addView = false; 
  368.                     } else { 
  369.                         let arr = this.find(this.tableData, 0); 
  370.                         this.childArr = [...this.casArr, String(arr.length)]; 
  371.                         this.form.value = 
  372.                             String(this.casArr[this.casArr.length - 1]) + 
  373.                             String(arr.length); 
  374.                         delete this.form.children; 
  375.                         const obj = Object.assign({}, this.form); 
  376.                         obj.children = []; 
  377.                         obj.childkey = [...this.casArr, String(arr.length)]; 
  378.                         arr.push(obj); 
  379.                         this.$message({ 
  380.                             type: 'success', 
  381.                             message: '添加成功' 
  382.                         }); 
  383.                         this.addView = false; 
  384.                     } 
  385.                 } else { 
  386.                     return false; 
  387.                 } 
  388.             }); 
  389.         } 
  390.     } 
  391. }; 
  392. </script> 
  393.  
  394. <style lang="scss" scoped> 
  395. ::v-deep .el-form-item__content { 
  396.     width: 203px; 
  397. } 
  398. </style>

 

責(zé)任編輯：武曉燕 來源： 前端歷劫之路
Vue無限級聯(lián)樹形
相關(guān)推薦

2022-06-28 15:29:56

Python編程語言計(jì)時器

2020-12-15 08:58:07

Vue編輯器vue-cli

2022-09-22 12:38:46

antd form組件代碼

2021-06-22 10:43:03

Webpack loader plugin

2023-04-26 12:46:43

DockerSpringKubernetes

2019-08-26 09:25:23

RedisJavaLinux

2021-11-10 11:40:42

數(shù)據(jù)加解密算法

2009-11-09 14:57:37

WCF上傳文件

2011-01-06 10:39:25

.NET程序打包

2022-08-26 08:01:38

DashWebJavaScrip

2016-11-01 09:46:04

2021-07-14 09:00:00

JavaFX開發(fā)應(yīng)用

2011-01-10 14:41:26

2011-05-03 15:59:00

黑盒打印機(jī)

2011-04-21 10:32:44

MySQL雙機(jī)同步

2022-03-29 18:26:31

優(yōu)化表格數(shù)據(jù)

2020-05-09 09:59:52

Python數(shù)據(jù)土星

2023-03-22 09:00:38

2018-11-22 09:17:21

消息推送系統(tǒng)

2019-10-29 15:46:07

區(qū)塊鏈區(qū)塊鏈技術(shù)
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號