Vue Element框架有哪些高级应用技巧？

本文共计588个文字，预计阅读时间需要3分钟。

目录 + Element多个相同的select不允许重复选择 + 动态循环出现的多个select不能重复选择相同的数据 + 先看效果图 + Element多个相同的select不允许重复选择 + template + div class=com_searchAndpageBoxPadding

目录

• element多个相同的select不允许重复选择
• 动态循环出的多个select 不能重复选择相同的数据
• 先看效果图

element多个相同的select不允许重复选择

<template>   <div class="com_searchAndpageBoxPadding">     <div>       <el-select v-model="value1" placeholder="请选择">         <el-option v-for="item in haha" :key="item.id" :label="item.label" :value="item.id" :disabled="disabledChoose(item)">         </el-option>       </el-select>       <el-select v-model="value2" placeholder="请选择">         <el-option v-for="item in haha" :key="item.id" :label="item.label" :value="item.id" :disabled="disabledChoose(item)">         </el-option>       </el-select>       <el-select v-model="value3" placeholder="请选择">         <el-option v-for="item in haha" :key="item.id" :label="item.label" :value="item.id" :disabled="disabledChoose(item)">         </el-option>       </el-select>     </div>   </div> </template>

<script> export default {   data() {     return {       value1: '',       value2: '',       value3: '',       haha: [{         id: 1,         value: '选项1',         label: '黄金糕'       }, {         id: 2,         value: '选项2',         label: '双皮奶',         disabled: true       }, {         id: 3,         value: '选项3',         label: '蚵仔煎'       }, {         id: 4,         value: '选项4',         label: '龙须面'       }, {         id: 5,         value: '选项5',         label: '北京烤鸭'       }],     }   },   computed: {     disabledChoose(item) {       return function (item) {         let findItemIndex = [this.value1, this.value2, this.value3].findIndex(item2 => item2 == item.id);         console.log('findItemIndex', findItemIndex)         let newArr = [this.value1, this.value2, this.value3].splice(findItemIndex, 1);         console.log('newArr', newArr)         return newArr.includes(item.id);       }     }   },   methods: {     showToggle(item) {       item.isSubShow = !item.isSubShow //需要展开内容，显示与隐藏之间切换     },     toDetail(item) {       this.$router.push('/helpDetails/' + item)     },   },   mounted() {   } } </script>

<style lang="scss" src="@/assets/css/card.scss"></style>

动态循环出的多个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:[{guid:'ddddd',id:null,},{guid:'eeeee',id:null,},{guid:'ffff',id:null,}],       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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。