Open sakila1012 opened 4 years ago
最近在开发的过程中遇到了一个问题,动态生成的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 }) }) } }
大功告成!!!
写在前面
最近在开发的过程中遇到了一个问题,动态生成的select,无法控制单个,如何校验每个select有没有选择,如何保存选择的数据成为我一时头疼的问题。 代码如下
想了很久,首先控制单个选择不影响其他的内容 通过设置select 的v-model 加上 [index]就不会出现这个问题
但是还是有另外一个问题,如果给每个select 加上校验规则的话,点击选择反而会报错,搞得我有点头大,经过一番思考想到:需要在data中设置类型,去除iview 自带的 rules 规则校验,改成自己写的方式
对于第二个问题,给每个select 加一个change 函数,对每个选择个项,将对应项设置为false,对应的js控制如下
点击提交确认,应该校验所有的数据,如果出现select没有选择,则对应的select应提示错误,方便用户进行统一的选择。具体如下:
大功告成!!!