vue+element 如何在Cascader级联选择器 懒加载lazyload中 实现 服务端请求数据 以及获取选择项的label值

1、lazyLoad中调用时，注意this的指向问题；

2、注意每个节点node的leaf，关系着是否生成子叶节点

3、通过this.$refs['refTypeInfo'].getCheckedNodes()[0].label获取label的值

<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px" style="width:300px;">
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="活动时间" prop="date">
      <el-col :span="11">
        <el-date-picker type="date" placeholder="选择日期" v-model="form.date"></el-date-picker>
      </el-col>
    </el-form-item>
    <el-form-item label="类型" prop="typeId">
      <el-cascader ref="refTypeInfo" v-model="form.typeId" :props="prop" clearable @change="handleTypeInfo" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'formItem',
  data () {
    const _this = this // 解决el-cascader组件中 lazyLoad方法调用this指代问题
    const validateDate = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error())
      } else {
        callback()
      }
    }

    return {
      form: {
        name: '',
        date: '',
        typeId: [] // 必须用数组
      },
      allTags: [], // options 可选项数据源，键名可通过 Props 属性配置
      pids: '', // 用于刷新选项
      prop: {// props 配置选项
        // lazy: true,
        value: 'id',
        label: 'name',
        children: 'children',
        leaf: 'leaf',
        lazy: true,
        lazyLoad: (node, resolve) => {
          const { level } = node
          let data = []
          if (level === 0) {
            data = _this.getData(_this.testData)
            resolve(data)
          } else {
            setTimeout(() => {
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              data = _this.getData(_this.testChirldData)
              resolve(data)
            }, 1000)
          }
        }
      },
      testData: [{ id: 1, name: '名字1', hasChirld: true }, { id: 2, name: '名字2', hasChirld: false }],
      testChirldData: [{ id: 11, pid: 1, name: '名字11', hasChirld: false }, { id: 12, pid: 1, name: '名字12', hasChirld: false }],
      rules: {
        name: [
          { required: true, message: '活动名称', trigger: 'blur' }
        ],
        date: [
          { validator: validateDate, message: '请选择时长', trigger: 'change' }
        ],
        typeId: [
          { required: true, message: '类型', trigger: 'change' }
        ]
      }
    }
  },
  mounted () {

  },
  methods: {
    getData (dd) { // expand-change 当展开节点发生变化时触发,向后台请求节点下的子元素
      // this.allTags = this.testData
      let arr = dd.map((item) => {
        item.leaf = true
        if (item.hasChirld) {
          item.children = []
          item.leaf = false
        }
        return item
      })
      return arr
    },

    handleTypeInfo (value) { // change 获取选中项label
      console.log(value)
      console.log(this.$refs['refTypeInfo'].getCheckedNodes()[0].label)// 获取选中项label
    },
    onSubmit () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // this.addEvent()
          return true
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style scoped>
</style>