el-cascader数据渲染及回显至页面(以及踩坑历程+解决)

第一次使用el-cascader就把坑踩了个遍,写个记录,也希望能够帮助到同为小猿的你们。

下面是我写的一个还原项目的例子

Bug1  首先是最小子集仍然有children,但是children为空数组,el-cascader渲染时,发现有children所以继续渲染了,只是没数据

 

  <el-cascader
          :props="defaultParams"
          :options="options"
          v-model="form.selectedOptions"
        >
        </el-cascader>


//option是要选择的数据

 options: [
        {
          id: "1",
          name: "水果",
          level: "1",
          pid: "0",
          status: "1",
          sub: [
            {
              id: "4",
              name: "苹果",
              level: "2",
              pid: "1",
              status: "1",
              sub: [
                {
                  id: "41",
                  name: "红富士",
                  level: "2",
                  pid: "1",
                  status: "1",
                  sub: [],
                },
                {
                  id: "42",
                  name: "元帅",
                  level: "2",
                  pid: "1",
                  status: "1",
                  sub: [],
                },
              ],
            },
            {
              id: "8",
              name: "香蕉",
              level: "2",
              pid: "1",
              status: "1",
              sub: [],
            },
          ],
        },
        {
          id: "2",
          name: "食品",
          level: "1",
          pid: "0",
          status: "1",
          sub: [
            {
              id: "5",
              name: "馒头",
              level: "2",
              pid: "2",
              status: "1",
              sub: [],
            },
            {
              id: "6",
              name: "大米",
              level: "2",
              pid: "2",
              status: "1",
              sub: [],
            },
          ],
        },
      ],

我这里的sub相当于children,可以看到我最小的子集,仍有sub:[ ] ,导致渲染空

解决:处理源数据(这里源数据☞  options),我看其他解决方式是将为空的children赋值为undefine,也有直接处理源数据,取出要用的数据,这里我把两种方式都写下来,可以择一使用,

第一种:

// 递归判断列表,把最后的sub设为undefined sub也就是源数据里的children
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].sub.length < 1) {
          // sub若为空数组,则将sub设为undefined
          data[i].sub = undefined;
        } else {
          // sub若不为空数组,则继续 递归调用 本方法
          this.getTreeData(data[i].sub);
        }
      }
      return data;
    },

第二种是将源数据过滤掉children,把主要数据取出来,放在一个新数组,这样就得到一个新的没有children的数组了,在使用时调用该方法就可以啦

 

 getTreeData(datas) {
      let data = [];
      datas.map((item) => {
        if (item.sub.length > 0) {
          let dadax = {
            label: item.name,  //这是需要展示的数据 我的数据是name,所以label对应的是name
            value: item.id,
            sub: this.getTreeData(item.sub),
          };
          data.push(dadax);
        } else {
          let dadax = {
            label: item.name,
            value: item.id,
          };
          data.push(dadax);
        }
        return data;
      });
      return data;
    },

Bug2    在做数据回显时,总是回显不出数据,找遍了各种方式还是没解决,到后来才发现在props里多加了个属性,导致不回显数据

下面,先说数据是怎么回显的,其实很简单,只需要后端把对应的层级关系的节点id就可以啦

例如我的   尤其要特别注意 给后端大佬说清 需要的数据格式 是 一个大的数组 里面是一个一个的小数组,一个数组代表了一个回显的数据,我这里做的是多选的,所以回显的数据比较多,这里以两个为例,多个回显数据就很多几条数组就可以啦   

 tips:在找其他答案的时候偶然发现也可以通过官方文档的getCheckedNodes方法来拿到选择过的数据然后再用v-model来绑定,也可以回显数据,这个方法我没试,应该也是可以的

 接下来,就要说说我踩得冤坑了,主要还是不熟悉el-casasder组件,乱加属性emitPath:false,这里是解决项目字段和组件字段不对应的方式,el-cascader默认显示的字段是label

 如果想具体了解下emitPath的用法可以参考element-ui的官网  

 到此,算是对el-cascader的使用告一段落了,有缺失的地方,也希望多多补充,觉得可以的话,就给俺点个赞吧