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

代码结构:

<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()的方法来获取全部的数据。
Logo

前往低代码交流专区

更多推荐