南昌网站建设模板合作,网站建设要学哪些方面,旅游网站开发实验报告,wordpress手机端编辑vue2中#xff0c;下拉框多选和全选的实现 代码布局在methods: 中添加功能函数较为完整的一个整体代码#xff1a; 如图所示点击全选即可完成下拉框中全部子项的全部的选中#xff0c;同时取消全选即可全部取消选择。
代码布局 div classchos-box2… vue2中下拉框多选和全选的实现 代码布局在methods: 中添加功能函数较为完整的一个整体代码 如图所示点击全选即可完成下拉框中全部子项的全部的选中同时取消全选即可全部取消选择。
代码布局 div classchos-box2span屏蔽策略名称/spanel-selectv-modelcluster_nameArrfilterablesizesmallmultipleplaceholder多选(可全选)collapse-tagscollapseTagsclearablechangesearchDataHAel-optionlabel全选value全选click.nativeselectAllHAv-ifoptions4.length/el-optionel-optionv-foritem in options4:keyitem:labelitem:valueitem/el-option/el-select/div相关的el参数可以查询
在methods: 中添加功能函数
method{searchDataHA(val) {if (!val.includes(全选) val.length this.options4.length) {this.cluster_nameArr.unshift(全选);} else if (val.includes(全选) val.length - 1 this.options4.length) {this.cluster_nameArr this.cluster_nameArr.filter((item) {return item ! 全选;});}this.page 1;this.getConfigData();//用来请求数据的函数},}较为完整的一个整体代码
template
div classchos-box2span屏蔽策略名称/spanel-selectv-modelcluster_nameArrfilterablesizesmallmultipleplaceholder多选(可全选)collapse-tagscollapseTagsclearablechangesearchDataHAel-optionlabel全选value全选click.nativeselectAllHAv-ifoptions4.length/el-optionel-optionv-foritem in options4:keyitem:labelitem:valueitem/el-option/el-select/div/templatescriptexport default {data() {// 已选中选项mulSelecteds: {type: Array,default() {return [];},},collapseTags: {type: Boolean,default: true,},}method{searchDataHA(val) {if (!val.includes(全选) val.length this.options4.length) {this.cluster_nameArr.unshift(全选);} else if (val.includes(全选) val.length - 1 this.options4.length) {this.cluster_nameArr this.cluster_nameArr.filter((item) {return item ! 全选;});}this.page 1;this.getConfigData();//用来请求数据的函数},selectAllHA() {if (this.cluster_nameArr.length this.options4.length) {this.cluster_nameArr [];this.options4.map((item) {this.cluster_nameArr.push(item);});this.cluster_nameArr.unshift(全选);} else {// 取消全选this.cluster_nameArr [];}console.log(全选, this.checked, this.options2, this.selectedArr);},},watch: {//用来监听变量mulSelecteds: {handler(newVal, oldVal) {this.selectedArr newVal;if (!this.selectedArr.includes(全选) this.selectedArr.length this.selectedArr.length this.options2.length) {this.selectedArr.unshift(全选);}},immediate: true,},},}/script
style langscss scoped.chos-box2 {margin-right: 25px;span {display: inline-block;width: 115px;}}
/style}
