溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關Vue.js中怎么利用ElementUI搭建一個無限級聯層級表格組件，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
源碼
<template> <div class="container"> <el-button type="primary" size="small" @click="handleCreate" icon="el-icon-circle-plus-outline" style="margin: 10px 0" >添加</el-button > <el-table :data="tableData" style="width: 100%; margin-bottom: 20px" border row-key="value" stripe size="medium" :tree-props="{ children: 'children' }" > <el-table-column prop="label" label="標簽名稱"> </el-table-column> <el-table-column prop="location" label="層級"> </el-table-column> <el-table-column label="操作" :align="alignDir" width="180"> <template slot-scope="scope"> <el-button type="text" size="small" @click="handleUpdate(scope.row)" >編輯</el-button > <el-button type="text" size="small" @click="deleteClick(scope.row)" >刪除</el-button > </template> </el-table-column> </el-table> <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="30%" > <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="margin-left: 50px" > <el-form-item label="層級：" prop="location" v-if="dialogStatus !== 'update'" > <el-select v-model="temp.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 && dialogStatus !== 'update'" label="子位置：" prop="children" > <el-cascader size="small" :key="isResouceShow" v-model="temp.children" placeholder="請選擇子位置" :label="'label'" :value="'value'" :options="tableData" :props="{ checkStrictly: true }" clearable @change="getCasVal" ></el-cascader> </el-form-item> <el-form-item label="標簽名稱：" prop="label"> <el-input v-model="temp.label" size="small" autocomplete="off" placeholder="請輸入標簽名稱" ></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogFormVisible = false" size="small"> 取消 </el-button> <el-button type="primary" size="small" @click=" dialogStatus === 'create' ? createData() : updateData() " > 確認 </el-button> </div> </el-dialog> </div> </template> <script> export default { name: 'Tag', data() { return { alignDir: 'center', textMap: { update: '編輯', create: '添加', }, dialogStatus: '', dialogFormVisible: false, temp: {}, isResouceShow: 1, sonStatus: false, casArr: [], idx: '', childKey: [], rules: { location: [ { required: true, message: '請選擇層級', trigger: 'blur', }, ], label: [ { required: true, message: '請輸入名稱', trigger: 'blur' }, ], children: [ { required: true, message: '請選擇子位置', trigger: 'blur', }, ], }, locationData: [ { id: '1', name: '頂', }, { id: '2', name: '子', }, ], tableData: [ { tagId: '1', // 標簽id label: '第0', // 標簽名稱 parent: '', // 父級名稱 location: '1', // 層級 value: '0', // 標識位 children: [ { tagId: '1', // 子標簽id childKey: ['0', '0'], // 子標識位 label: '第0-0', parent: '第0', location: '2', value: '0-0', children: [], }, { tagId: '2', // 子標簽id childKey: ['0', '1'], label: '第0-1', parent: '第0', location: '2', value: '0-1', children: [], }, ], }, ] }; }, methods: { // 遞歸尋找同級 findSameTable(arr, i, casArr) { if (i == casArr.length - 1) { return arr; } else { return this.findTable( arr[casArr[i].substr(casArr[i].length - 1, 1)].children, (i += 1), casArr ); } }, // 尋找父級 findTable(arr, i, casArr) { if (i == casArr.length - 1) { let index = casArr[i].substr(casArr[i].length - 1, 1); return arr[index]; } else { return this.findTable( arr[casArr[i].substr(casArr[i].length - 1, 1)].children, (i += 1), casArr ); } }, // 遞歸表格數據(添加) 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) ); } }, // 遞歸表格數據(編輯) 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.temp); } else { return this.findSd( arr[casArr[i].substr(casArr[i].length - 1, 1)].children, (i += 1), casArr ); } }, // 遞歸尋找同步名稱 findLable(arr, i, casArr) { if (i == casArr.length - 1) { let index = casArr[i].substr(casArr[i].length - 1, 1); return arr[index]; } else { return this.findLable( arr[casArr[i].substr(casArr[i].length - 1, 1)].children, (i += 1), casArr ); } }, // 同步子名稱 useChildLable(arr) { if (arr !== []) { arr.forEach((item) => { item.parent = this.temp.label; }); } }, // 遞歸表格數據(刪除) findDel(arr, i, item) { let casArr = item.childKey; if (i == casArr.length - 2) { let index = casArr[i].substr(casArr[i].length - 1, 1); arr[index].children.forEach((it, ix, arrs) => { if (it == item) { return arrs.splice(ix, 1); } }); } else { return this.findDel( arr[casArr[i].substr(casArr[i].length - 1, 1)].children, (i += 1), item ); } }, // 置空 resetTemp() { this.temp = {}; }, // 打開添加 handleCreate() { this.resetTemp(); this.dialogFormVisible = true; this.dialogStatus = 'create'; this.$nextTick(() => { this.$refs['dataForm'].clearValidate(); }); }, // 添加 createData() { this.$refs['dataForm'].validate((valid) => { if (valid) { if (this.sonStatus == false) { this.temp.value = String(this.tableData.length); const obj = Object.assign({}, this.temp); obj.children = []; obj.parent = ''; this.tableData.push(obj); this.$message({ type: 'success', message: '添加成功', }); this.dialogFormVisible = false; } else { let arr = this.find(this.tableData, 0); this.temp.value = String(this.casArr[this.casArr.length - 1]) + '-' + String(arr.length); delete this.temp.children; const obj = Object.assign({}, this.temp); obj.children = []; obj.childKey = [...this.casArr, String(arr.length)]; obj.parent = this.findTable( this.tableData, 0, this.casArr ).label; if (this.temp.location === '2') { obj.location = String( [...this.casArr, String(arr.length)].length ); } arr.push(obj); this.$message({ type: 'success', message: '添加成功', }); this.dialogFormVisible = false; } } else { return false; } }); }, // 打開更新 handleUpdate(row) { console.log(row); row.value.length != 1 ? (this.sonStatus = true) : (this.sonStatus = false); this.temp = Object.assign({}, row); // copy obj if (row.childKey) { this.childKey = row.childKey; this.idx = row.childKey[row.childKey.length - 1]; } else { this.idx = row.value; } console.log(this.idx); this.dialogStatus = 'update'; this.dialogFormVisible = true; this.$nextTick(() => { this.$refs['dataForm'].clearValidate(); }); }, // 更新 updateData() { this.$refs['dataForm'].validate((valid) => { if (valid) { if (this.temp.location === '1') { console.log(this.temp); this.tableData.splice(this.idx, 1, this.temp); this.useChildLable(this.tableData[this.idx].children); this.$message({ type: 'success', message: '編輯成功', }); this.dialogFormVisible = false; } else { this.findSd(this.tableData, 0, this.childKey); this.useChildLable( this.findLable(this.tableData, 0, this.childKey) .children ); this.$message({ type: 'success', message: '編輯成功', }); this.dialogFormVisible = false; } } else { return false; } }); }, // 刪除父級節點 deleteParent(item) { this.tableData.forEach((it, ix, arrs) => { if (it == item) { return arrs.splice(ix, 1); } }); }, // 刪除 deleteClick(item) { this.$confirm(`此操作將刪除該標簽, 是否繼續?`, '提示', { confirmButtonText: '確定', cancelButtonText: '取消', type: 'warning', }) .then(() => { if (item.children.length != 0) { this.$message.warning({ message: '請刪除子節點', duration: 1000, }); } else { ++this.isResouceShow; if (item.value.length == 1) { this.deleteParent(item); this.$message({ type: 'success', message: '刪除成功', }); } else { 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; }, }, }; </script>代碼可以直接拿來用，但是要注意事先要安裝下ElementUI框架。無限層級的核心算法是遞歸算法，掌握了這一點，任何難題都可以解決。
下面，我們就這個項目來回顧下前端中的遞歸算法。
遞歸簡而言之就是函數調用自己。遞歸算法中有兩個條件：基線條件和遞歸條件。基線條件用于控制遞歸啥時候暫停，而遞歸條件是控制調用自己的方式。
最簡單的一個例子是5的階乘。
var func = function(i){ if(i === 1){ return 1; }else{ return i*func(i-1); } } func(5);這樣就很簡單的實現了一個遞歸算法，我們將上述例子拆解下。
// 遞 5*func(4); 5*4*func(3); 5*4*3*func(2); 5*4*3*2*func(1); // 歸 5*4*3*2*1; 5*4*3*2; 5*4*6; 5*24; 120
以上就是Vue.js中怎么利用ElementUI搭建一個無限級聯層級表格組件，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
