element循环验证表单select

element循环验证表单select

循环生成的el-select，需要根据选择的内容，反填其他对应的下拉列表;
比如：第一个选择的值，第二个和第三个按照第一个反填；

• 控制单个下拉列表的方式，循环下标，校验单独校验

<template>
    <div>
        <el-form ref="Form" :model="form" label-width="90px" :rules="rules">
        <div v-for="(item, index) in form.list" :key="index">
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="值日"
                :prop="`list.${index}.dutyPerson`"
                :rules="rules.dutyPerson"
              >
                <el-select
                  filterable
                  clearable
                  multiple
                  v-model="item.dutyPerson"
                  @change="getChage"
                >
                  <el-option
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in dutyPerson"
                    :key="index"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          
        </div>
      </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                dateStr: "",
                type: "",
                list: [ { dutyPerson: [] }, { dutyPerson: [] }, { dutyPerson: [] } ],
            },
            dutyPerson:[ {label:'张三',value:'zs'},{label:'李四', value:'ls'}],
            rules: {
                dutyPerson: [{ required: true, message: '请输入', trigger: "change" }]
            },
        };
    },
    methods:{
        getChage(e) {
            console.log(e);
        }
    }
};
</script>

<style lang="scss" scoped></style>

反填时候，获取当前选择的值，把列表中其他dutyPerson的值设置成一样的即可；

 getChage(e) {
    console.log(e);
    let firstSelect = [...e];
    this.form.list.map(item=>{
      item.dutyPerson = firstSelect;
    })
}