百度网站官方认证怎么做,外贸服装商城网站建设,口碑好的镇江网站建设,网站托管费用多少在实习中#xff0c;遇到了如下需求#xff0c;要求如下#xff1a; 上面提到了一个需求为#xff0c;选择全部与选择一个或者多个互斥#xff0c;我们来看一下如何解决 核心代码 监听value的变化#xff0c;如果含有‘全部’#xff0c;且数组长度1#xff0c;则删… 在实习中遇到了如下需求要求如下 上面提到了一个需求为选择全部与选择一个或者多个互斥我们来看一下如何解决 核心代码 监听value的变化如果含有‘全部’且数组长度1则删除第一个元素 先选择‘全部’再选择其他‘全部’会被剔除 先选择一个或者多个‘其他’一个或者多个‘其他’会被剔除 无论怎么选择都可以实现全部与选择一个或者多个‘其他’互斥 watch: {value(newVal) {if (newVal.includes(全部)) {if (newVal.length 1) {this.value.shift();}} else if (this.value.length this.cityList.length - 1) {// 如果选择了除“全部”外的所有城市自动选择“全部”this.value [全部];}}}
完整代码
templateSelect v-modelvalue multiple filterable placeholder点击修改应用 stylewidth: 200px;Option v-foritem in cityList :valueitem.value :keyitem.value{{ item.label }}/Option/Select/templatescriptimport { Option, Checkbox, Select } from view-design;export default {components: {Select,Option,Checkbox},data() {return {value: [],cityList: [{ value: 全部, label: 全部 },{ value: 北京, label: 北京 },{ value: 上海, label: 上海 },{ value: 广州, label: 广州 },{ value: 深圳, label: 深圳 }]};},watch: {value(newVal) {if (newVal.includes(全部)) {if (newVal.length 1) {this.value.shift();}} else if (this.value.length this.cityList.length - 1) {// 如果选择了除“全部”外的所有城市自动选择“全部”this.value [全部];}}}}/script
