码迷,mamicode.com
首页 > 其他好文 > 详细

elementUi省市区级联

时间:2019-12-17 10:27:25      阅读:484      评论:0      收藏:0      [点我收藏+]

标签:splay   ===   ade   ace   err   cat   des   label   log   

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

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

elementUi省市区级联

标签:splay   ===   ade   ace   err   cat   des   label   log   

原文地址:https://www.cnblogs.com/acmyun/p/12052847.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!