Abstract

In elementUI’s library, the Select component does not select this operation entirely. However, in daily development we will inevitably need to use the full selection. So if we use the SELECT component to complete the selection operation, mainly including the selection of several logic

  • If “All” is checked, all options are checked
  • If you cancel “All,” then we delete all selected
  • To cancel an item that is not “all field”, we need to cancel the selected “all”
  • If all items except “all” are selected, then we need to check all items including “all”

The effect is as follows:

Key words: Element, select, select

Code implementation

<el-select v-model="val" multiple @change="selectChangeHandle">
			<el-option :value='code' :label='name' v-for="{code,name} in options" :key='code'>
			</el-option>
</el-select>
Copy the code
data() {
	return {
		val: [].flag: false.// Check whether all were checked before
		options: [{
			code: -1.name: 'all'
		}, {
			code: 0.name: 'mango.}, {code: 1.name: 'apple'}, {code: 2.name: '无花果'}, {code: 3.name: 'No fruit',},]}},methods: {
	selectChangeHandle(newArr) {
		const curFlag = newArr.some(item= > item == -1)// Whether all is checked;
		if (this.flag && ! curFlag) {// If you have checked all before, but not checked this time, it means to cancel all the operation, then clear all the selection
			this.flag = false;
			this.val = [];
		} else if (!this.flag && curFlag) {
			// If it was not checked before but is checked now, it means that all cases are checked this time, so we select all cases
			this.flag = true;
			this.val = this.options.map(item= > item.code)
		} else {
			// All but all options are checked this time
			if (curFlag && newArr.length < this.options.length) {
				// If there is not enough of them, cancel them
				this.flag = false;
				this.val = newArr.filter(item= >item ! = -1);
			} else if(! curFlag && newArr.length ==this.options.length - 1) {
				this.flag = true;
				this.val = this.options.map(item= > item.code)
			}
		}
	}
}
Copy the code