注意:如果组件互相影响的情况下,数据chirlden不能为[] (空数组),否则不回显
<el-cascader
class="cascader filter-item"
ref="cascader"
v-model="casVals"
:options="scene_condition"
:props="{ value:'index_alias', label:'name',multiple: true}"
:collapse-tags="false"
clearable
@change="handleChange"
></el-cascader>
data(){
return{
casVals: [],
scene_condition:[],//组件数据
preRootVal: 0, // 记录之前的根节点值,用来实现单选
}
}
handleChange() {
const firstLvVal = Array.from(new Set(this.casVals.map(cas => cas[0])))
let newRootVal = firstLvVal[0]
// 控制第一级单选
if (firstLvVal.length > 1) { // 大于1说明选了新的根节点
newRootVal = firstLvVal.filter((val) => val !== this.preRootVal)[0]
}
this.casVals = this.casVals.map(val => {
if (val[0] === newRootVal) return val
})
this.preRootVal = newRootVal
// 处理后端需要的数据
this.$nextTick(() => {
const checkedNodes = this.$refs['cascader'].getCheckedNodes() // 获取已选节点对象
const finalNodes = checkedNodes.filter(node => {
// 过滤父节点已选的
if (!(node.parent && node.parent.checked)) return node
}
)
const finalArr = []
const dataInfo = {}
finalNodes.forEach(node => {
const path = node.path
const pathLabels = node.pathLabels
const obj = {}
let cur = obj
for (let i = 0; i < path.length; i++) {
cur.index_alias = path[i].split("|")[0]
cur.name = pathLabels[i]
cur.is_org=path[i].split("|")[1]
cur.id=path[i].split("|")[2]
cur.is_subordinate=path[i].split('|')[3]
cur.pid=path[i].split('|')[4]
cur.mid=path[i].split('|')[4]
if (i + 1 < path.length) {
cur.children = {}
cur = cur.children
}
}
finalArr.push(obj)
})
console.log(finalArr,'数组里有多个已选中的对象(一直找到根节点)')
finalArr.forEach((item, index) => {
const { index_alias,name } = item
if (!dataInfo[index_alias]) {
dataInfo[index_alias] = {
index_alias,
children: [],
name,
// ......
// 如果还需要其他参数加进去
}
}
dataInfo[index_alias].children.push(item.children)
})
const list = Object.values(dataInfo) // list 转换成功的数据
console.log(list[0])
})
},