elementUi省市区级联

Posted 2021-03-22 acmyun

 项目中有用到级联样式，但是是三个接口出来的数据，在此记录一下:

html:

<el-cascader
            v-model="ruleForm.address"
            :props="props"
            style="width:220px;"
            placeholder="省市区"
          />

View Code

JS：

props: {
        lazy: true,
        lazyLoad(node, resolve) {
          if (node.level === 0) {
            getProvince()
              .then(value => {
                const nodes = value.data.map(res => ({
                  label: res.name,
                  level: node.level,
                  value: res
                }))
                resolve(nodes)
              })
              .catch(val => {
                this.$message.error(val)
              })
          } else if (node.level === 1) {
            getCity(node.data.value.provinceId)
              .then(value => {
                const nodes = value.data.map(res => ({
                  label: res.name,
                  level: node.level,
                  value: res
                }))
                resolve(nodes)
              })
              .catch(val => {
                this.$message.error(val)
              })
          } else if (node.level === 2) {
            getCountry(node.data.value.cityId)
              .then(value => {
                // console.log(value)
                const nodes = value.data.map(res => ({
                  label: res.name,
                  leaf: node.level,
                  value: res
                }))
                resolve(nodes)
              })
              .catch(val => {
                this.$message.error(val)
              })
          } else if (node.level === 3) {
            resolve([])
          }
        }
      },

View Code