Avue Form 表单中下拉选择选项后，实现另外一个下拉列表数据切换

一：遇到问题

在Element Ui 中，是用Avue-Form 封装的表单，想要实现下拉选择相应的选项后，另外一个的下拉列表数据跟着切换，例如下图

是否空车核放选择否的时候，进出区标志的下拉数据是进区和出区，

选择是的时候，进出区标志的下拉数据是入区和进区

表单代码

<avue-form ref="form" :option="option" v-model="obj" size="mini" @submit="dataLoad"></avue-form>

　　

二：解决方案

首先，给进出区标志默认的下拉数据

{
      label: '进出区标志',
      placeholder: '进出区标志',
      prop: 'ieFlag',
      span: 4,
      labelWidth: 100,
      search: true,
      size: 'mini',
      type: "select",
      dicUrl: "api/lh-system/dict/findDict?code="+ CUS_IO_TYPECD, props: { label: "dictLabel", value: "dictValue" },
      rules: [{
        required: true,
        message: '请选择进出区标志',
        trigger: 'blur'
      }],
      display:true,
    },

然后，是否空车核放，监听一个chang事件，判断选择的是还是否，从而请求不同的接口，

最重要的来了，先找到进出区标志，通过$this.option.column[0]，我的进出区标志放在column第一个位置上，所以是【0】，可以根据具体情况查找

然后 $this.$set 将请求之后的接口数据给到一个叫做 ‘dicData’这样一个属性即可

{
      label: '是否空车核放',
      prop: 'emptyBz',
      placeholder: '',
      labelWidth: 100,
      align: 'center',
      span: 4,
      size: 'mini',
      value: 'N',
      type: "select",
      dicUrl: "api/lh-system/dict/findDict?code="+ IS_EMPTY,
      props: {
        label: "dictLabel",
        value: "dictValue"
      },
      change: (val) => {
        if(val.value === 'Y'){
　　　　　　// 是空车的情况下 getIeFlag().then((res) =>{ const dataZhi = res.data.data $this.$set($this.option.column[0], 'dicData', dataZhi); }) }else{
　　　　　　// 不是空车的情况下 getIfList().then(res =>{ const dataZhi = res.data.data $this.$set($this.option.column[0], 'dicData', dataZhi); }) }
      },
    },

哈哈哈，以上基本就实现了想要的功能，那又遇到一个问题，当我选择是否空车切换时候，出入区标志总是会携带上一次切换选择的选项，

可以回到页面上，监听这个是否空车表单字段，每次切换时候，将出入区标志的value值清空即可

watch: {
    emptyBz: {
        handler(val){
          this.obj.ieFlag = ''
        }
      },
},
computed: {
    emptyBz() {
        return this.obj.emptyBz;
    },
}