2021-05-17

element ui动态控制多选select

1. 需求分析:select组件在添加的操作时为多选，修改的操作时单选，创建修改共同使用一个组件，所以需要动态控制multiple属性
2. 首页设置 :multiple=“dialogStatus === ‘create’?true:false”
3. 实现效果后发现问题
   修改操作后再打开实现添加逻辑，已清空v-model绑定的值但是select组件仍显示值
   解决方案
   动态控制select显示隐藏
   html中修改如下 加上 v-if=“update”

  <el-select v-if="update"
            ref="multipleTable"
            v-model="temp.item_id"
            placeholder="请选择项目"
            clearable
            class="filter-item"
            :disabled="temp.staff_type === 'staff' ? false : true"
            :multiple="dialogStatus === 'create'?true:false"
            @change="selectChange"
          >
            <el-option
              v-for="item in ltemList"
              :key="item.id"
              :label="item.item_name"
              :value="item.id"
            />
          </el-select>

vue.js中

export default {
	data(){
		return{
			update:true
		}
	},
	  watch:{
	    'dialogStatus'(){
	      this.update = false
	      setTimeout(()=>{
	        this.update = true
	      })
	    }
   },

}