vue动态循环出的多个select出现过的变为disabled(实例代码)
人气:0vue动态循环出的多个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效果,希望对大家有所帮助!
您可能感兴趣的文章:
- VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
- 实例分析vue循环列表动态数据的处理方法
- VUE v-for循环中每个item节点动态绑定不同函数的实例
- 关于vue v-for循环解决img标签的src动态绑定问题
- VUE在for循环里面根据内容值动态的加入class值的方法
- vue.js 嵌套循环、if判断、动态删除的实例
- vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
- vue select选择框数据变化监听方法
- Vue Element 分组+多选+可搜索Select选择器实现示例
- vue 不使用select实现下拉框功能(推荐)
- Vue.js做select下拉列表的实例(ul-li标签仿select标签)
- 浅谈Vue Element中Select下拉框选取值的问题
加载全部内容