解决element-plus中select选择器动态设置多选属性multiple报错思路

解决思路：给el-select加上key属性。
代码:

<template>
       <el-form>
          <el-form-item label="条件: " class="rule-form-item">
            <el-select
              v-model="ruleItem.opreator"
              placeholder="请选择关联条件"
              @change="handleOpreatorChange"
              clearable
            >
              <el-option label="包含【单选】" :value="0"></el-option>
              <el-option label="等于【多选】" :value="1"></el-option>
            </el-select>
            <el-select
              v-model="ruleItem.values"
              :multiple="ruleItem.isMultiple"
              placeholder="请选择"
              clearable
              :key="ruleItem.opreator"
            >
              <!-- 方法一：
              el-select 加上 :key="ruleItem.opreator"
              更新整个 el-select -->
              <el-option
                v-for="item in ruleItem.options"
                :key="item"
                :label="item"
                :value="item"

              >
                {{ item }}
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
</template>

<script>
import { defineComponent, reactive, toRefs, watch, useAttrs, onMounted } from 'vue'

export default defineComponent({
  name: 'home',
  setup() {

        const state = reactive({
          ruleItem: { opreator: '', values: '', isMultiple: false, options: ['星期一', '星期二', '星期三', '星期四', '星期五'] }
        })

        const handleOpreatorChange = (v) => {
          if (v) {
            state.ruleItem.isMultiple = !!v;
            state.ruleItem.values = [];
          } else {
            state.ruleItem.isMultiple = !!v;
            state.ruleItem.values = '';
          }
        }

        return {
            ...toRefs(state),
            handleOpreatorChange
        }
  }
})
</script>

参考链接:juejin.cn/post/7025128360703426591

本作品采用《CC 协议》，转载必须注明作者和本文链接