個人中心
退出
Vue.js與ElementUI搭建無限級聯(lián)層級表格組件
前言
今天，回老家了。第一件事就是回家把大屏安排上，寫作的感覺太爽了，終于可以專心地寫文章了。我們今天要做的項目是怎么樣搭建一個無限級聯(lián)層級表格組件，好了，多了不多說，趕快行動起來吧！
項目一覽
到底是啥樣子來？我們來看下。
正如你所看到的那樣，這個組件涉及添加、刪除、編輯功能，并且可以無限級嵌套。那么怎樣實現(xiàn)的？我們來看下。
源碼
直接給出源碼，就是這么直接。
<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
);
}
},
// 遞歸表格數(shù)據(jù)(添加)
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)
);
}
},
// 遞歸表格數(shù)據(jù)(編輯)
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;
});
}
},
// 遞歸表格數(shù)據(jù)(刪除)
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;
}
});
},
// 刪除父級節(jié)點
deleteParent(item) {
this.tableData.forEach((it, ix, arrs) => {
if (it == item) {
return arrs.splice(ix, 1);
}
});
},
// 刪除
deleteClick(item) {
this.$confirm(`此操作將刪除該標簽, 是否繼續(xù)?`, '提示', {
confirmButtonText: '確定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
if (item.children.length != 0) {
this.$message.warning({
message: '請刪除子節(jié)點',
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框架。無限層級的核心算法是遞歸算法，掌握了這一點，任何難題都可以解決。
下面，我們就這個項目來回顧下前端中的遞歸算法。
遞歸簡而言之就是函數(shù)調(diào)用自己。遞歸算法中有兩個條件：基線條件和遞歸條件?；€條件用于控制遞歸啥時候暫停，而遞歸條件是控制調(diào)用自己的方式。
最簡單的一個例子是5的階乘。
var func = function(i){
if(i === 1){
return 1;
}else{
return i*func(i-1);
}
}
func(5);
這樣就很簡單的實現(xiàn)了一個遞歸算法，我們將上述例子拆解下。
// 遞
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
遞歸其實可以理解成兩個操作遞與歸?？梢赃@樣比喻，比如你在做一道數(shù)學題時，有一個知識點你不懂，你需要查資料。但是，通過查資料你發(fā)現(xiàn)這個知識點中你又有另一個不明白的知識點，你又開始繼續(xù)查，直到你沒有不懂的知識點，這樣遞的操作已經(jīng)完成。然后，你把已經(jīng)查過的這些知識點又從尾到頭復習了一遍，這樣歸的操作已經(jīng)完成。最后，你明白了最初那個知識點。
作者：Vam的金豆之路
主要領(lǐng)域：前端開發(fā)
我的微信：maomin9761
微信公眾號：前端歷劫之路
分類導航