element级联下拉框已选数据手动反显

需求

查看详情页面级联下拉框已选数据进行反显,并且不使用级联下拉框

需求效果

基础数据展示

// 已选中级联下拉框数据列表 二维数组
const valueList = [[1,2,3],[1,2,4],[1,2,5],[1,7,8],[1,7,9],[1,7,10],[1,12,13],[1,12,14],[1,12,15]]
// 级联下拉框数据
const list = [{
 value: 1,
 label: '东南',
 children: [{
   value: 2,
   label: '上海',
   children: [
     { value: 3, label: '普陀' },
     { value: 4, label: '黄埔' },
     { value: 5, label: '徐汇' }
   ]
 }, {
   value: 7,
   label: '江苏',
   children: [
     { value: 8, label: '南京' },
     { value: 9, label: '苏州' },
     { value: 10, label: '无锡' }
   ]
 }, {
   value: 12,
   label: '浙江',
   children: [
     { value: 13, label: '杭州' },
     { value: 14, label: '宁波' },
     { value: 15, label: '嘉兴' }
   ]
 }]
}, {
 value: 17,
 label: '西北',
 children: [{
   value: 18,
   label: '陕西',
   children: [
     { value: 19, label: '西安' },
     { value: 20, label: '延安' }
   ]
 }, {
   value: 21,
   label: '新疆维吾尔族自治区',
   children: [
     { value: 22, label: '乌鲁木齐' },
     { value: 23, label: '克拉玛依' }
   ]
 }]
}]  

方法

// 将级联下拉框数据扁平化
flattenArray(arr) {
  let result = [];
  arr.forEach(item => {
    result.push({
      value: item.value,
      label: item.label
    });
    if (item.children) {
      result = result.concat(flattenArray(item.children));
    }
  });
  return result;
}
// 根据已选数组查找对应数据
cascaderValue(list, valueList) {
  const array = []
  valueList.forEach(arrItem => {
    const valueList = []
    arrItem.forEach(valueItem => {
      list.some(item => {
        if(item.value === valueItem) {
          // 这里根据需要将已选数据push进去,我这里只需要label
          valueList.push(item.label)
        }
        return item.value === valueItem
      })
    })
    array.push(valueList)
  })
  return array
}

实际使用

cascaderValue(flattenArray(list), valueList)
输出:
[ [ "东南", "上海", "普陀" ], [ "东南", "上海", "黄埔" ], [ "东南", "上海", "徐汇" ], [ "东南", "江苏", "南京" ], [ "东南", "江苏", "苏州" ], [ "东南", "江苏", "无锡" ], [ "东南", "浙江", "杭州" ], [ "东南", "浙江", "宁波" ], [ "东南", "浙江", "嘉兴" ] ]

html

// 页面代码
<el-tag style="margin-right: 5px;" type="info" size="small" v-for="(item, index) in formatSalesTeam" :key="index">
  {{ item.join('/') }}
</el-tag>

该文章为个人记录方便再次使用,各位有需要随取随用 希望对各位有帮助