el-cascader 懒加载 回显数据

Posted 2022-01-27 闰土的土

<template>
  <div class=\'dashboard-container\'>
    <el-cascader ref=\'cascader\' v-model=\'cascaderValue\' v-loading=\'loading\' :disabled=\'disabled\' :props=\'props\'
                 :title=\'selStr\' clearable
                 element-loading-spinner=\'el-icon-loading\'
                 placeholder=\'请选择\'
                 @change=\'handleChange($event)\' />
  </div>
</template>

<script>
import  getAddressCity, getAddressDistrict, getAddressProvince  from \'@/api/common\'

export default 
  name: \'index\',
  data() 
    return 
      cascaderValue: [],
      selArr: [],
      selStr: \'\',
      loading: false,
      loadignArr: [true, true, true],
      props: 
        lazy: true,
        lazyLoad: this.lazyLoad
      
    
  ,
  props: 
    value: 
      Type: Object
    ,
    disabled: 
      default: false
    
  ,
  watch: 
    value: 
      handler(val) 
        if (val) 
          console.log(val, this.value)
          this.lazyLoad()
          this.cascaderValue = this.value
        
      ,
      immediate: true
    ,
    loadignArr: 
      handler(val) 
        console.log(val, \'loaingArr\')
        const result = val.includes(true)
        if (result) 
          this.loading = true
         else 
          this.loading = false
        
      

    
  ,
  created() 

  ,
  methods: 
    handleChange(event) 
      console.log(event)
      console.log(this.$refs.cascader.getCheckedNodes())
      const selNode = this.$refs.cascader.getCheckedNodes()
      const selVal = selNode[0]
      this.getSelValue(selVal)
      this.$nextTick(() => 
        this.$emit(\'getSelArr\', this.selArr)
      )
    ,
    getSelValue(val) 
      console.log(val.label)
      if (val.parent) 
        this.getSelValue(val.parent)
      
      const s = this.selStr ? \'/\' : \'\'
      this.selStr = this.selStr + s + val.label
      this.selArr.push( name: val.label, id: val.value, levle: val.levle )
    ,
    //
    lazyLoad(node, resolve) 
      setTimeout(() => 
        console.log(node.level)
        if (node.level == 0) 
          this.getProvence(node, resolve)
        
        if (node.level == 1) 
          this.getCity(node, resolve)
        
        if (node.level == 2) 
          this.getDistrict(node, resolve)
        
      , 100)
    ,
    getProvence(node, resolve) 
      this.$set(this.loadignArr, 0, true)
      getAddressProvince().then((res) => 
        console.log(res)
        if (Array.isArray(res.data)) 
          const nodes = res.data.map(item => (
            value: item.provinceCode, //
            // value: item.dwdm,
            label: item.provinceName,
            leaf: node.level >= 2//层级
          ))
          resolve(nodes)
        
      ).catch(error => this.$message.error(error)).finally(() => 
        this.$set(this.loadignArr, 0, false)
      )
    ,
    getCity(node, resolve) 
      this.$set(this.loadignArr, 1, true)
      getAddressCity(node.value).then((res) => 
        if (Array.isArray(res.data)) 
          const nodes = res.data.map(item => (
            value: item.cityCode, //
            // value: item.dwdm,
            label: item.cityName,
            leaf: node.level >= 2//层级
          ))
          resolve(nodes)
        
      ).catch(error => this.$message.error(error)).finally(() => 
        this.$set(this.loadignArr, 1, false)
      )
    ,
    getDistrict(node, resolve) 
      this.$set(this.loadignArr, 2, true)
      getAddressDistrict(node.value).then((res) => 
        if (Array.isArray(res.data)) 
          const nodes = res.data.map(item => (
            value: item.districtCode, //
            // value: item.dwdm,
            label: item.districtName,
            leaf: node.level >= 2//层级
          ))
          resolve(nodes)
        
      ).catch(error => this.$message.error(error)).finally(() => 
        this.$set(this.loadignArr, 2, false)
      )
    
  

</script>

<style lang=\'less\' scoped>
.el-cascader 
  line-height: 34px;

</style>