vue 联级选择器

vue：

<el-form-item label="选择地区：" prop="xmwz">
   <el-cascader v-model="projectData.xmwz" :props="props"> </el-cascader>
</el-form-item>

props数据加载 后端传过来的

      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level, value } = node
          if (level === 0) {
            getProvinces().then((res) => {
              const nodes = res.data.map((m) => {
                return {
                  value: m.id,
                  label: m.name
                }
              })
              resolve(nodes)
            })
          } else if (level === 1) {
            const postData = {
              country_id: value
            }
            const url = '/api/v1/getattr/10'
            commonFun(postData, url, 'city').then((res) => {
              const nodes = res.data.map((m) => {
                return {
                  value: m.id,
                  label: m.name
                }
              })
              resolve(nodes)
            })
          } else if (level === 2) {
            const postData = {
              city_id: value
            }
            const url = '/api/v1/getattr/10'
            commonFun(postData, url, 'area').then((res) => {
              const nodes = res.data.map((m) => {
                return {
                  value: m.id,
                  label: m.name,
                  leaf: level >= 2
                }
              })
              resolve(nodes)
            })
          }
        }
      },

getProvinces返回的数据结构

0: {name: "北京市", id: 871}

1: {name: "河北省", id: 891}

2: {name: "台湾省", id: 902}

3: {name: "吉林省", id: 897}

4: {name: "宁夏回族自治区", id: 885}

5: {name: "新疆维吾尔自治区", id: 883}

.......

commonFun返回的数据结构类似 也是name 和id。

根据省加载市再加载区，三个不同的接口