vue el-cascader 动态加载(三级分类或省市区)

vue el-cascader 动态加载(三级分类或省市区)_第1张图片

1.tempalte中:

    
        
        
          取 消
          确 定
        
      

2.data中:

  partyOrganId: [],
  cascaderData: [],

3.在编辑入口
  this.getNodes()

4. script中(methods):

    handleChange (value) {
      this.partyOrganId = value
    },
    handleItemChange (val) {
      console.log(val, 'ggggggg')
      this.getNodes(val)
    },
    getNodes(val) {
      let idArea
      let sizeArea
      if (!val) {
        idArea = null
        sizeArea = 0
      } else if (val.length === 1) {
        idArea = val[0]
        sizeArea = val.length
      } else if (val.length === 2) {
        idArea = val[1]
        sizeArea = val.length
      }
      getproductcategory({
        id: idArea,
        shop_id: this.ssid
      }).then(res => {
        if (res.status === 200) {
          this.ones = res.data
          if (sizeArea === 0) {
            this.cascaderData = this.ones.map((value, i) => {
              return {
                id: value.id,
                name: value.name,
                cities: []
              }
            })
          } else if (sizeArea === 1) {
            this.cascaderData.map((value, i) => {
              if (value.id === val[0]) {     // 遍历数据源=选中
                if (!value.cities.length) {  //value.cities不存在时
                  value.cities = this.ones.map((value, i) => {
                    return {
                      id: value.id,
                      name: value.name,
                      cities: []
                    }
                  })
                }
              }
            })
          } else if(sizeArea === 2) {
            this.cascaderData.map((value, i) => {
              if (value.id === val[0]) {
                value.cities.map((value, i) => {
                  if (value.id === val[1]) {
                    if (!value.cities.length) {
                      value.cities = this.ones.map((value, i) => {
                        return {
                          id: value.id,
                          name: value.name
                        }
                      })
                    }
                  }
                })
              }
            })
          }
        }
      })
    },

 

你可能感兴趣的:(vue)