vue项目中使用el-Cascader级联选择器实现省市区三级联动

在项目中，有很多的地方都会使用三级联动来实现省市区的功能，那么如何在项目中使用el-cascader组件呢

我在项目中这个组件是封装在Form表单里面，首先父组件去使用这个组件

 <basicFormsVue
        :list="list"
        @query="query"
        @queryPrefectural="queryPrefectural"
        @queryArea="queryArea"
        @queryCounty="queryCounty"
      ></basicFormsVue>

然后再data里面去定义数据

data() {
    return {
      formInline: {
        keyword: "",
        level: "",
        area: "",
      },
      tableData: [],
      list: [
        {
          type: "cascader",
          title: "地区",
          value: [],
          options: [],
          width: 200,
        },
        {
          type: "input",
          title: "关键字",
          value: "",
          // width: 300,
        },
        {
          type: "select",
          title: "级别",
          value: "",
          options: [{ value: "本地中心" }, { value: "省际中心" }],
          width: 200,
        },
      ],
       level: 1,
      provice: [],
      ProvinceCode: "",
      Prefectural: [],
      PrefecturalCode: "",
      county: [],
      countyCode: "",

在父组件中传递一个options来进行渲染数据，设置value为【】

然后去调用接口中的数据，来渲染省市区

   // //获取地区
    async queryProvice() {
      //查询省
      //省份
      const data = {
        areaCode: 0,
        level: 1,
      };
      const res = await reqSelectArea(data);
      console.log("查询生", res);
      try {
        this.provice = res.result; //回来的数据 ，，现在需要拿到这个编码
      } catch (error) {}
    },

    async queryPrefectural(provinceCodes) {
      //查询地市
      const data = {
        areaCode: provinceCodes[0],
        level: 2,
      };
      await reqSelectArea(data).then((res) => {
        this.Prefectural = res.result;
      });
      this.queryArea();
    },

    async queryCounty(count) {
      console.log("c", count[1]);
      //区县
      const data = {
        areaCode: count[1],
        level: 3,
      };
      console.log("data", data);
      await reqSelectArea(data).then((res) => {
        console.log("res333", res);
        this.county = res.result;
      });
      this.queryArea();
    },

通过组见的changge事件，来拿到每一个编码，这个操作是在子组件完成的

   handelChange(e) {
      console.log("eeeee", e.length);
      if (e.length == 2) {
        // 市
        console.log("e大于2调用");
        this.$emit("queryCounty", e);
      } else {
        // 省
        console.log("e小于2调用");
        this.$emit("queryPrefectural", e);
      }
    },

最后通过循环一次加入options中

 createFatherOptions(father, children, grandChild) {
      let fatherOptions = [];

      for (let i = 0; i < father.length; i++) {
        let currentFather = father[i];
        let currentOption = {
          id: currentFather.id,
          pid: currentFather.pid,
          label: currentFather.name,
          value: currentFather.code,
          level: currentFather.level,
          children: [],
        };

        fatherOptions.push(currentOption);
      }

      return fatherOptions;
    },
    addChildrenOptions(fatherOptions, children, grandChild) {
      for (let i = 0; i < fatherOptions.length; i++) {
        let currentOption = fatherOptions[i];

        for (let j = 0; j < children.length; j++) {
          let currentChild = children[j];
          if (currentOption.value === currentChild.pid) {
            let currentChildOption = {
              value: currentChild.code,
              id: currentChild.id,
              label: currentChild.name,
              level: currentChild.level,
              pid: currentChild.pid,
              children: [],
            };

            currentOption.children.push(currentChildOption);
          }
        }
      }
    },
    addGrandChildrenOptions(fatherOptions, grandChild) {
      for (let i = 0; i < fatherOptions.length; i++) {
        let currentOption = fatherOptions[i];

        for (let j = 0; j < currentOption.children.length; j++) {
          let currentChildOption = currentOption.children[j];

          for (let k = 0; k < grandChild.length; k++) {
            let currentGrandChild = grandChild[k];
            if (currentChildOption.value === currentGrandChild.pid) {
              currentChildOption.children.push({
                value: currentGrandChild.code,
                id: currentGrandChild.id,
                label: currentGrandChild.name,
                level: currentGrandChild.level,
                pid: currentGrandChild.pid,
              });
            }
          }
        }
      }
    },
    queryArea() {
      console.log("this.Prefectural", this.Prefectural);
      let father = this.provice;
      let children = this.Prefectural;
      let grandChild = this.county;

      let fatherOptions = this.createFatherOptions(
        father,
        children,
        grandChild
      );
      this.addChildrenOptions(fatherOptions, children, grandChild);
      this.addGrandChildrenOptions(fatherOptions, grandChild);

      this.list[0].options = fatherOptions;
    },
  },

这样就实现了