element-ui级联选择器数据转化，以及解决显示不生效问题

element-ui级联选择器数据转化，以及不生效问题

级联选择器数据转化

在项目中会用到各类的数据类型，前端需要给后台传匹配的数据，难免前台做数据转换，本次分享级联选择器中树结构数据转化的一种方式，需求多选情况下，如果之选一级传一级id，如果选择二级单位则传一级id和二级id，并以数组形式。

<el-cascader collapse-tags v-model="formData.deptId" placeholder="请选择部门" class="input" size="small" clearable :options="deptOptions" :props="optionProps" @change="handleChange">

// 配置项，options为数据源
deptOptions:JSON.parse(sessionStorage.getItem('deptList'))

// 配置项，props为
optionProps: {
        multiple: true, //多选
        value: "id",
        label: "name",
        checkStrictly:false //取消父子节点关联，虽然默认是false，但是有时候不生效，则单独写出来false
        },

重点来了，数据处理内容，需要数据，把二级数组转变为一级数组，数组的flat() 方法，

handleChange(value) {
      this.deptIdList = Array.from(new Set(value.flat(Infinity)))
    },

数组flat()方法扩展

知识扩展：数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

[1, 2, [3, 4]].flat()
// [1, 2, 3, 4]

上面代码中，原数组的成员里面有一个数组，flat()方法将子数组的成员取出来，添加在原来的位置。

flat()默认只会“拉平”一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

上面代码中，flat()的参数为2，表示要“拉平”两层的嵌套数组。

如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数。

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

如果原数组有空位，flat()方法会跳过空位。

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

级联选择器不生效问题

问题：一级内容的children为‘’情况下，一级无法选中，当二级或者最后一级无children的情况下显示空白内容

解决方案：通过循环遍历，将最后一级children变成undefined或者null即可解决

// 清除children数组变成null或者undefined
export function getTreeData(data) {
  for (let i = 0; i < data.length; i++) {
    if (data[i].children?.length < 1) {
      // 最后一级没有数据将children变成undefined
      data[i].children = undefined || null;
    }
  }
  return data;
}