幽灵资源网 Design By www.bzswh.com
vue动态循环出的多个select出现过的变为disabled
<template> <div class="artcle"> <el-form label-width="100px" :model="testForm"> <el-form-item v-for="(vtem, index) in testForm.version" :key="index" label="命令版本"> <el-select @change="comChange" v-model="vtem.ver"> <el-option v-for="item in versionList" :key="item.id" :value="item.id" :disabled="item.id == vtem.ver || selectedArr.includes(item.id)" :label="item.name"> </el-option> </el-select> <el-button icon="el-icon-circle-plus-outline" size="small" @click="add(index)" circle></el-button> <el-button icon="el-icon-remove-outline" size="small" @click="remove(index)" :disabled="index === 0" circle></el-button> </el-form-item> <el-form-item label="测试输入框"> <el-input v-model="testForm.input"></el-input> </el-form-item> </el-form> </div> </template>
ps:vue 动态循环出的多个select 不能重复选择相同的数据
<template> <div class="program" v-for="(parItem,index) in parArr" :key="parItem.guid"> <Select v-model="parItem.id" @on-change="onChangeProgram"> <Option v-for="(subItem,idx) in programList" :key="subItem.id" :data-index='idx' v-show="parItem.id == subItem.id || !selectIdsArr.includes(subItem.id)" :value="subItem.id> {{subItem.name}}</Option> </Select> </div> </template> <script> export default { data() { return { parArr:[], selectIdsArr:[], programList:[{ "id":1, "name":"选项1" },{ "id":2, "name":"选项2" },{ "id":3, "name":"选项3" }], } }, methods: { onChangeProgram() { this.selectIdsArr = []; for (const item of this.parArr) { if (item.id) { this.selectIdsArr.push(item.id); } } }, }, } </script>
总结
以上是小编给大家分享的vue动态循环出的多个select出现过的变为disabled效果,希望对大家有所帮助!
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...