elementUI级联选择器Cascader，删除tag存在的问题

elementUI级联选择器Cascader，删除tag存在的问题

    <div class="address-choose">
        <div class="card-show">
            <el-button
                class="tags"
                v-for="(item,index) in cityShowList"
                :key="index"
                :disabled="!showSave"
                @click="deleteCity(index)"
            >{{item}}</el-button>
        </div>
        <el-cascader
            v-model="cityList"
            :options="options"
            :props="{ multiple: true }"
            collapse-tags
            clearable
            @change="changeCity"
            :disabled="!showSave"
        ></el-cascader>
    </div>

点击按钮删除事件时，输入框中的值并没有变化

     deleteCity(index) {
         this.cityShowList.splice(index, 1);
         this.cityList.splice(index, 1);
     },

解决办法

• 给级联选择器v-if
• 删除事件中加this.$nextTick()

      <div class="address-choose">
          <div class="card-show">
              <el-button
                  class="tags"
                  v-for="(item,index) in cityShowList"
                  :key="index"
                  :disabled="!showSave"
                  @click="deleteCity(item,index)"
              >{{item}}</el-button>
          </div>
          <el-cascader
              v-model="cityList"
              :options="options"
              :props="{ multiple: true }"
              collapse-tags
              clearable
              @change="changeCity"
              :disabled="!showSave"
              
              v-if="showCity"
          ></el-cascader>
      </div>

    deleteCity(item, index) {
        this.showCity = false;
        this.cityShowList.splice(index, 1);
        this.cityList.splice(index, 1);
        this.$nextTick(() => {
            this.showCity = true;
        });
    },