- 效果图
- 实现数组里选择月份，月份只能选一次不能重复
-
reject 方法用于从集合中移除符合特定条件的元素，返回剩余不符合条件的元素。其语法与 filter 方法相反，常用于反向筛选场景。
-
some 函数用于判断集合中是否存在符合特定条件的元素。其核心功能是遍历数组或对象集合，对每个元素执行回调函数，当回调函数返回 true 时立即停止遍历并返回 true，否则返回 false
<template><div><el-form @submit.native.prevent:label-width="$px2rem('100px')"><el-form-item label="月份："v-for="(item,index) in monthList":key="index"><el-select v-model="item.month"filterableclearableplaceholder="请选择"><el-option v-for="item in getMonthOptions(item)":key="item.id":label="item.name":value="item.id"></el-option></el-select></el-form-item></el-form></div></template><script lang="ts">import { Component, Vue } from "vue-property-decorator";import _ from "lodash";@Component({name: "pageName",components: {},})export default class extends Vue {monthList = [{month: "",},{month: "",},{month: "",},{month: "",},{month: "",},{month: "",},];monthData = [{id: 1,name: "1月",},{id: 2,name: "2月",},{id: 3,name: "3月",},{id: 4,name: "4月",},{id: 5,name: "5月",},{id: 6,name: "6月",},{id: 7,name: "7月",},{id: 8,name: "8月",},{id: 9,name: "9月",},{id: 10,name: "10月",},{id: 11,name: "11月",},{id: 12,name: "12月",},];getMonthOptions(row) {const options = this.monthData || [];const list = _.reject(this.monthList, row);return options.filter(el => !_.some(list, { month: el?.id }));}}</script><style lang="scss" scoped></style>