iview 级联选择器 Cascader的使用，将树结构解析为多级选择

iview 级联选择器 Cascader的使用

iview 级联选择器 Cascader的使用

最近在做项目时遇到了使用Cascader将后端的树形数据解析成三级选项，并实现选择，

html

<FormItem label="请选择维度">
            <template>
              <Cascader :data="results" v-model="select" @on-change="handleChange"></Cascader>
            </template>
          </FormItem>

从后端接收数据，并解析

  //引入树结构
        getTreeData().then(res => {
          if (res.data != null) {
            console.log(res.data.data)
            this.treeData = res.data.data;
            this.results = this.$options.methods.convertTree(this.treeData);
          }
        })，
convertTree(treeData) {
        const result = []
        // 遍历 tree
        treeData.forEach((item) => {
          // 解构赋值
          let {
            id: value,
            name: label,
            children: children
          } = item
          // 如果有子节点，递归
          if (children) {
            children = this.convertTree(children)
          }
          result.push({
            value,
            label,
            children
          })
        })
        // console.log("调用成功")


        return result
        // console.log("调用成功")
      },

后端传回来的数据

{
    "success": 1,
    "message": "请求成功！",
    "data": [
        {
            "id": 1001,
            "name": "阿萨斯",
            "children": [
                {
                    "id": 10011,
                    "name": "1.1按时发散分散",
                    "children": [
                        {
                            "id": 100111,
                            "name": "碍事法师法师",
                            "children": []
                        }
                    ]
                },
             

回传数据的方法

      //选择维度
      handleChange(value, selectedData) {//selectData是被选中的数据，可按照被选中的数据顺序取值
        console.log(selectedData)
        this.addOne.id_dimension = selectedData[0].value;
        this.addOne.id_master = selectedData[1].value;
        this.addOne.id_node = selectedData[2].value;
        this.addOne.name_node = selectedData[2].label;
        this.addOne.name_master = selectedData[1].label;
        this.addOne.name_dimension = selectedData[0].label;
      },