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;
    },
}