Element-ui 的 select 下拉框设定初值后,不能重新选择的问题

377 阅读1分钟

重点:

  1. select change 事件发生时触发 $forceUpdate() 强制更新视图
  2. 通过 :prop="eoaList[${index}].selectValue" 来设置动态表单验证
  3. 通过 this.$refs.approvalForm.fields 来遍历重置表单
<template>
  <el-form ref="approvalForm" label-position="top" :model="{ eoaList }" class="chain-form" hide-required-asterisk>
    <div v-for="(item, index) of eoaList" :key="item.chainPostId" class="chain-item">
      <el-radio v-model="item.radio" label="1" class="form-radio" @change="radioChange(index)">选择岗位内用户</el-radio>
      <el-form-item :prop="`eoaList[${index}].selectValue`" :rules="allRules">
        <el-select
          v-model="item.selectValue"
          placeholder="请选择"
          class="from-input"
          clearable
          @change="$forceUpdate()">
          <el-option
            v-for="seItem of item.umAccountList"
            :key="seItem.umNo"
            :label="seItem.name"
            :value="seItem.umNo"></el-option>
        </el-select>
      </el-form-item>

      <el-radio v-model="item.radio" label="2" class="form-radio" @change="radioChange(index)">选择其他用户</el-radio>
      <el-form-item :prop="`eoaList[${index}].aliveValue`" :rules="allRules">
        <el-input v-model="item.aliveValue" placeholder="请输入内容" suffix-icon="el-icon-search" />
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
export default {
  data() {
    this.allRules = { required: true, message: '该项为必填', trigger: 'change' }
    return {
      eoaList: [], // 审批链
    }
  },
  methods: {
    /**
     * @description 切换 清除表单验证
     */
    radioChange(index) {
      const fields = this.$refs.approvalForm.fields
      fields.forEach(e => {
        if ([`eoaList[${index}.selectValue]`, `eoaList[${index}].aliveValue`].includes(e.prop)) {
          e.resetField()
        }
      })
    },
  },
}
</script>