v-for 动态生成多个 select，如何控制和校验这些select

写在前面

最近在开发的过程中遇到了一个问题，动态生成的select，无法控制单个，如何校验每个select有没有选择，如何保存选择的数据成为我一时头疼的问题。代码如下

<div class="form-control mb_15 relative first-approve" v-for="(item, index) in  copyOrMvData" :key="index">
                            <span class="item-left absolute pos-abs">【<span class="ellips" :title="cutStr(item.description)">{{cutStr(item.description)}}</span>】审批人：</span>
                            <Select v-model="selectId[index]" style="width:320px;margin-left:145px;" @on-change="selectApprover($event, item, index)" class="fl">
                                <Option :value="el.id" v-for="el in item.approvers" :key="el.id">{{ el.name }}</Option>
                            </Select>
                            <p v-if="approveIderr[index]" class="dlg-lessnameinpt-tip">请选择审批人！</p>
                        </div>

想了很久，首先控制单个选择不影响其他的内容通过设置select 的v-model 加上 [index]就不会出现这个问题

但是还是有另外一个问题，如果给每个select 加上校验规则的话，点击选择反而会报错，搞得我有点头大，经过一番思考想到：需要在data中设置类型，去除iview 自带的 rules 规则校验，改成自己写的方式

data () {
  return {
    selectId: Array(this.opts.copyOrMv.tasks.length).fill(""),
    approveIderr: Array(this.opts.copyOrMv.tasks.length).fill(false)
  }
}

对于第二个问题，给每个select 加一个change 函数,对每个选择个项，将对应项设置为false,对应的js控制如下

selectApprover (e, ele, index){
                if (e) {
                    this.$set(this.approveIderr, index, false)
                }
            },

点击提交确认，应该校验所有的数据，如果出现select没有选择，则对应的select应提示错误，方便用户进行统一的选择。具体如下：

methods: {
              onConfirm () {
                let  selectData = {
                        tasks: []
                    }

                // console.log(this.selectId)
                // 如果没有选择则该项没有选择的提示错误
                this.selectId.forEach((item, index) => {
                    if (item == '' ) {
                        self.$set(self.approveIderr, index, true)
                    }
                })
                if (this.approveIderr.indexOf(true) === -1) {
                   // 表示每个选择的数据都是成功的，没有出现没有选择的情况，可以进行下一步的操作了
                   this.copyOrMvData.forEach((item, index) => {
                        selectData.tasks.push({
                            "approverId": this.selectId[index],
                            "data": item.data,
                            "title": item.title,
                            "description": item.description
                        })
                    })
                }
}

大功告成！！！

sakila1012 / blog

v-for 动态生成多个 select，如何控制和校验这些select #51

写在前面