vue之级联选择器选中拿到当前全部数据（elementU）

业务需求：应后台要求接收的数据是多个，在级联选择器中只能拿到指定的值，固解决如何拿到多个值传入后台。

代码结构：

<el-form-item label="分类">
  <el-cascader
     v-model="formInline.classification"
     :options="classificationOpt"
     :props="{
        label: 'cloumName',
        value: 'id',
        checkStrictly: true,
     }"
      clearable
     ref="cascaderAddr"
      @change="classChange" >
      </el-cascader>
 </el-form-item>

data () {
    return {
	    classification:[],//接收的数组
	    formInline: {
	        classification: {}, // 分类显示
	        classifyValue: '' // 分类接收数据
	     }
	}
  },
  // 获取分类选中数据
    classChange () {
      if (
        this.$refs.cascaderAddr.getCheckedNodes() && this.$refs.cascaderAddr.getCheckedNodes()[0]
      ) {
        const nodeContent = this.$refs.cascaderAddr.getCheckedNodes()[0].data
        console.log(nodeContent )//这个位置可以打印一下
        this.formInline.classifyValue = nodeContent
      } else {
        this.formInline.classifyValue = null
      }
    },

此时的你就可以拿到你选中的全部，然后在接口传值的时候将你于后台规定的字段填写正确即可，当添加了清除 clearable 时会在控制台报错，所以在change事件里进行判断。

//传入接口数据结构
 chooseAttrDTO: {
          cloumName: this.formInline.classifyValue.cloumName ? undefined : '',
          cloumSign: this.formInline.classifyValue.cloumSign ? undefined : '',
          id: this.formInline.classifyValue.id ? undefined : ''
        }

总结：因为在element 组件级联选择器只能指定固定的值，如果用之前的写法只能拿到一个值，所以添加一个ref，使用getCheckedNodes()的方法来获取全部的数据。