网上商城网站设计,免费咨询口腔科医生回答在线,wordpress 建站容易吗,wordpress手机端侧边工具栏在实习中#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
