首先,需求包含美食和美景两个el-tree,底部统计的总项数包括父项。
html:
<div
v-loading="dataloading"
class="app-content-left"
>
<h3>选择喜欢的</h3>
<div class="custom-tree">
<el-tree
ref="tree"
:data="data"
show-checkbox
node-key="id"
:props="defaultProps"
:default-expanded-keys="expanded"
@check="handleCheckChange"
>
<span
slot-scope="{ node, data }"
class="custom-tree-node"
:class="{ hasChildren: data.children }"
>
<el-tooltip
class="item"
effect="dark"
:content="node.label"
placement="right"
:disabled="node.label && node.label.length < 16"
>
<span> {{ node.label | ellipsis(16) }} </span>
</el-tooltip>
</span>
</el-tree>
<el-tree
ref="treezdy"
:data="datazdy"
show-checkbox
node-key="id"
:empty-text="''"
:props="defaultProps"
:default-expanded-keys="expanded"
@check="handleCheckChangezdy"
>
<span
slot-scope="{ node, data }"
class="custom-tree-node"
:class="{ hasChildren: data.children }"
>
<el-tooltip
class="item"
effect="dark"
:content="node.label"
placement="right"
:disabled="node.label && node.label.length < 16"
>
<span> {{ node.label | ellipsis(16) }} </span>
</el-tooltip>
</span>
</el-tree>
</div>
<div class="bottom-bar">
<!-- 已选择 <span>{{ selection.length }}/{{ originData.length }}</span> 项 -->
已选择 <span>{{ selectionAll.length }}/{{ originData.length }}</span> 项
</div>
</div>
script:
export default {
data() {
return {
dataloading: false, // 数据项的加载
expanded: [], // 默认不展开树 [-1]
defaultProps: { // 不明白可以查看elementui的官方文档
children: 'children',
label: 'name',
},
data: [], // 接口获取的美食数据项
datazdy: [], // 接口获取的美景数据项
selection: [], // 美食选中的数据项
selectionzdy: [], // 美景选中的数据项
selectionAll: [], // 选择的数据项总和数字
originData: [], // 所有美食美景数据项总项数字
gborws: [], // 没有进行树格式化方法的美食数据
zdyorws: [], // 没有进行树格式化方法的美景数据
}
}
}
method:{}
// 数据项
getdaItemList() {
this.dataloading = true
daItemList().then((response) => {
// let rows = response.rows
let rows = [], rowszdy = []
response.rows.map(v=> {
// 是否美景: (0否 1是)== 是否美食:(0:美食:1:不是美食)
if (v.isCustom === '1') {
rowszdy.push(v)
} else if (v.isCustom === '0') {
rows.push(v)
}
})
if (rows.length > 0) {
let father = {}
rows.forEach((row) => {
// father[row.dataGroupId] = row.dataGroupName
father[row.orderNum] = row.dataGroupName
})
for (let k in father) {
rows.push({
id: Number(k),
name: father[k],
orderNum: -1,
dataGroupName: '美食',
})
}
rows.push({
id: -1,
name: '美食',
orderNum: -2,
dataGroupName: '',
})
this.gborws = rows
this.data = this.handleTree(rows, 'id', 'orderNum')
}
// 美景数据项
if (rowszdy.length > 0) {
let fatherzdy = {}
rowszdy.forEach((row) => {
fatherzdy[row.orderNum] = row.dataGroupName
})
for (let k in fatherzdy) {
rowszdy.push({
id: Number(k),
name: fatherzdy[k],
orderNum: -1,
dataGroupName: '美景',
})
}
rowszdy.push({
id: -1,
name: '美景',
orderNum: -2,
dataGroupName: '',
})
this.zdyorws = rowszdy
this.datazdy = this.handleTree(rowszdy, 'id', 'orderNum')
}
// this.data = this.handleTree(response.rows, 'id', 'orderNum')
this.originData = rows.concat(rowszdy)
this.dataloading = false
})
.catch(() => {
this.dataloading = false
})
},
handleCheckChange(checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) {
this.selection = this.$refs.tree.getCheckedNodes()
this.selectionAll = this.selection.concat(this.selectionzdy)
// console.log(this.selectionAll)
},
// 监听美景选择
handleCheckChangezdy(checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys) {
this.selectionzdy = this.$refs.treezdy.getCheckedNodes()
this.selectionAll = this.selection.concat(this.selectionzdy)
// console.log(this.selectionAll)
},
/**
* 构造树型结构数据
* @param {*} data 数据源
* @param {*} id id字段 默认 'id'
* @param {*} parentId 父节点字段 默认 'parentId'
* @param {*} children 孩子节点字段 默认 'children'
* @param {*} rootId 根Id 默认 0
*/
export function handleTree(data, id, parentId, children, rootId, orderId = null) {
id = id || 'id'
parentId = parentId || 'parentId'
children = children || 'children'
rootId =
rootId ||
Math.min.apply(
Math,
data.map(item => {
return item[parentId]
})
) ||
0
//对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data))
//循环所有项
const treeData = cloneData.filter(father => {
let branchArr = cloneData.filter(child => {
//返回每一项的子级数组
return father[id] === child[parentId]
})
branchArr.length > 0 ? (father.children = branchArr) : ''
//返回第一层
return father[parentId] === rootId
})
if (orderId) {
treeData.forEach((item, fatherIndex, arr) => {
let child = treeData[fatherIndex].children
if (child && child.sort) {
child.sort((a, b) => a[orderId] - b[orderId])
}
})
}
return treeData != '' ? treeData : data
}
获取选中的数据项数据
let getCheckedNodes = this.$refs.tree.getCheckedNodes().concat(this.$refs.treezdy.getCheckedNodes())
this.checkNodes = getCheckedNodes.filter((item) => {
// return !item.children.length
return item
})