element ui樹(shù)形表格如下：
它的數(shù)據(jù)格式為：使用children字段來(lái)存放子級(jí)數(shù)據(jù)
tableData: [
{
id: 1,
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀區(qū)金沙江路 1518 弄",
},
{
id: 2,
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀區(qū)金沙江路 1517 弄",
},
{
id: 3,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀區(qū)金沙江路 1519 弄",
children: [
{
id: 31,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀區(qū)金沙江路 1519 弄",
},
{
id: 32,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀區(qū)金沙江路 1519 弄",
},
],
},
{
id: 4,
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀區(qū)金沙江路 1516 弄",
},
],element ui 樹(shù)形&懶加載 表格如下：
默認(rèn)是不請(qǐng)求子級(jí)數(shù)據(jù)的，當(dāng)點(diǎn)擊下拉icon時(shí)再發(fā)起請(qǐng)求
?完整代碼：
DOM:? 需注意以下屬性
? ? ? ? row-key="id"
? ? ? ? lazy
? ? ? ? :load="load"
? ? ? ? :tree-props="{
? ? ? ? ? children: 'children',
? ? ? ? ? hasChildren: 'hasChildren',
? ? ? ? }"
<el-table
:data="tableData1"
style="width: 100%"
row-key="id"
border
lazy
:load="load"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>數(shù)據(jù)：就是普通的數(shù)組，沒(méi)有子級(jí)數(shù)據(jù)的概念
tableData1: [
{
id: 1,
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀區(qū)金沙江路 1518 弄",
},
{
id: 2,
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀區(qū)金沙江路 1517 弄",
},
{
id: 3,
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀區(qū)金沙江路 1519 弄",
hasChildren: true,
},
{
id: 4,
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀區(qū)金沙江路 1516 弄",
},
],懶加載事件：
load(tree, treeNode, resolve) {
// 這里發(fā)請(qǐng)求，請(qǐng)求當(dāng)前點(diǎn)擊的子級(jí)數(shù)據(jù)data，然后交給resolve處理，就可以正確展示子級(jí)數(shù)據(jù)
setTimeout(() => {
resolve(data);
}, 300);
},發(fā)現(xiàn)樹(shù)形懶加載多選表格有兩個(gè)問(wèn)題：
1、勾選父級(jí)時(shí)子級(jí)不會(huì)勾選上
一般我們實(shí)現(xiàn)表格多選功能是這樣的：這里不再使用這種方式
<el-table-column
type="selection"
width="55">
</el-table-column>?第一步：需要我們手動(dòng)寫個(gè)勾選表頭和勾選列
<el-table-column type="test" align="left" width="55">
<!-- 表頭的全選勾選框，indeterminate：是否半選狀態(tài)，handleCheckAllDetail：全選事件 -->
<template slot="header" slot-scope="scope">
<el-checkbox
:indeterminate="isIndeterminate"
v-model="checkAllDetail"
@change="handleCheckAllDetail"
></el-checkbox>
</template>
<!-- 表格數(shù)據(jù)列單行勾選框，使用checked屬性決定是否勾選，單行勾選事件 -->
<template slot-scope="scope">
<el-checkbox
v-model="scope.row.checked"
@change="handleCheckDetail(scope.row, $event)"
></el-checkbox>
</template>
</el-table-column>第二步：?定義數(shù)據(jù)
checkAllDetail: false,
isIndeterminate: false,第三步：編寫handleCheckAllDetail、handleCheckDetail函數(shù)，
每次勾選時(shí)要做的事:
處理全選、半選狀態(tài)；
用個(gè)數(shù)組處理勾選行的數(shù)據(jù)，勾選時(shí)將數(shù)據(jù)存起來(lái)，取消勾選時(shí)將數(shù)據(jù)刪除；
若勾選父級(jí)時(shí)，將子級(jí)的數(shù)據(jù)也全部勾選；取消勾選反之；
若勾選子級(jí)時(shí)，也要計(jì)算父級(jí)是否應(yīng)該勾選上；
第四步：點(diǎn)擊下拉icon時(shí)也要數(shù)據(jù)子級(jí)數(shù)據(jù)的勾選狀態(tài)
這里涉及到一個(gè)很重要的問(wèn)題：如何拿到子級(jí)數(shù)據(jù)：先給表格綁定ref屬性
this.$refs.mulTable.store.states.lazyTreeNodeMap這個(gè)可以取到所有展開(kāi)的子級(jí)數(shù)據(jù)
數(shù)據(jù)格式為：{父級(jí)id1: [{子數(shù)據(jù)1},?{子數(shù)據(jù)2}],??父級(jí)id2: [{子數(shù)據(jù)}] }
?舉個(gè)例子：當(dāng)勾選單個(gè)數(shù)據(jù)時(shí)如何處理：
// 單條數(shù)據(jù)的勾選操作
handleCheckDetail(row, val) {
// 如果勾選的是子級(jí)數(shù)據(jù)：那么要計(jì)算子級(jí)決定父級(jí)勾選狀態(tài)
if (row.parent) {
let parentId = row.parent; //父級(jí)id
let loadChildData = this.$refs.mulTable.store.states.lazyTreeNodeMap; // 所有展開(kāi)項(xiàng)的懶加載數(shù)據(jù)
let parentItem = loadChildData[parentId]; //當(dāng)前父級(jí)下的所有子數(shù)據(jù)
// 判斷當(dāng)前下的所有子數(shù)據(jù)是否全部勾選上了
let checked = parentItem?.every(function (currentValue, index, arr) {
return currentValue.checked;
});
// 設(shè)置父級(jí)數(shù)據(jù)的勾選狀態(tài)
for (let i = 0; i < this.list.length; i++) {
if (this.list[i].id === parentId) {
this.$set(this.list[i], "checked", checked);
}
}
// 勾選則將id添加進(jìn)去，否則刪除id【selectArrIds是用來(lái)存放勾選數(shù)據(jù)的id的數(shù)組】
if (checked) {
this.selectArrIds.push(parentId);
} else {
let index = this.selectArrIds.indexOf(parentId);
if (index !== -1) {
this.selectArrIds.splice(index, 1);
}
}
} else {
// 如果當(dāng)前點(diǎn)擊的是父級(jí)數(shù)據(jù)：那么父級(jí)決定子級(jí)狀態(tài)
let loadChildData = this.$refs.mulTable.store.states.lazyTreeNodeMap; // 所有展開(kāi)項(xiàng)的懶加載數(shù)據(jù)
let datas = loadChildData[row.id]; //當(dāng)前父級(jí)下的所有子數(shù)據(jù)
// 將父級(jí)的勾選狀態(tài)同步給子級(jí)
datas?.forEach((item) => {
this.$set(item, "checked", val);
});
// 勾選則將id添加進(jìn)去，否則刪除id【selectArrIds是用來(lái)存放勾選數(shù)據(jù)的id的數(shù)組】
if (val) {
this.selectArrIds.push(row.id);
} else {
let index = this.selectArrIds.indexOf(row.id);
if (index !== -1) {
this.selectArrIds.splice(index, 1);
}
}
}
// 計(jì)算半選和全選狀態(tài)
let totalCount = this.list.length;
this.checkAllDetail =
totalCount === this.selectArrIds.length ? true : false;
this.isIndeterminate =
this.selectArrIds.length > 0 && this.selectArrIds.length < totalCount;
},?當(dāng)勾選全選checkbox時(shí)如何處理：
handleCheckAllDetail(val) {
this.isIndeterminate = false;
let setIds = [];
this.list.forEach((item, index) => {
if (
val &&
this.selectArrIds.indexOf(item.id) === -1
) {
setIds.push(item.id);
}
});
if (val) {
this.selectArrIds = setIds;
} else {
this.selectArrIds = [];
}
// 若有展開(kāi)項(xiàng)，則將子級(jí)也勾選上
this.setChildCheck(val);
},?setChildCheck方法：
// 設(shè)置子級(jí)的數(shù)據(jù)勾選狀態(tài)
setChildCheck(val) {
let loadChildData = this.$refs.mulTable.store.states.lazyTreeNodeMap;
if (Object.keys(loadChildData).length > 0) {
let keys = [];
for (let key in loadChildData) {
keys.push(key);
}
for (let i = 0; i < keys.length; i++) {
let datas = loadChildData[keys[i]];
datas?.forEach((item) => {
// 按父級(jí)的勾選狀態(tài)去控制子級(jí)的勾選狀態(tài)
let isChecked;
for (let i = 0; i < this.list.length; i++) {
if (this.list[i].id === item.parent) {
isChecked = this.list[i].checked;
}
}
this.$set(item, "checked", isChecked);
});
}
}
},效果如下：
element ui懶加載樹(shù)形表格-勾選
2、對(duì)子級(jí)數(shù)據(jù)進(jìn)行刪除、修改、添加操作時(shí)，不會(huì)更新子級(jí)數(shù)據(jù)
這個(gè)問(wèn)題目前還沒(méi)實(shí)現(xiàn)，但是估計(jì)也是通過(guò)this.$refs.mulTable.store.states.lazyTreeNodeMap處理數(shù)據(jù)，稍后更新~~
PS:后來(lái)發(fā)現(xiàn)了另外一個(gè)非常棒的UI庫(kù)，可以考慮使用~~
vxe-table v4文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-406036.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-406036.html
到了這里，關(guān)于element ui 樹(shù)形-懶加載-表格-多選 勾選問(wèn)題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
