<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<el-form>
<el-form-item>
<el-select multiple collapse-tags v-model='selectedArray.arr' @change='changeSelect' @remove-tag='removeTag' placeholder='Select'>
<el-option label='All' value='All' @click.native='selectAll'></el-option>
<el-option v-for='(item, index) in options' :key='index' :label='item.name' :value='item.name'></el-option>
</el-select>
</el-form-item>
</el-form>
</div>
<script>
new Vue({
el:"#app",
data() {
return {
selectedArray: {
arr:[]
},
options: [
{ name: '一一', label: 'one' },
{ name: '二二', label: 'tow' },
{ name: '三三', label: 'three' },
{ name: '四四', label: 'four' },
{ name: '五五', label: 'five' }
]
}
},
methods: {
selectAll() {
if (this.selectedArray.arr.length < this.options.length) {
this.selectedArray.arr = []
this.options.map((item) => {
this.selectedArray.arr.push(item.name)
})
this.selectedArray.arr.unshift('All')
} else {
this.selectedArray.arr = []
}
},
changeSelect(val) {
if (!val.includes('All') && val.length === this.options.length) {
this.selectedArray.arr.unshift('All')
} else if (val.includes('All') && (val.length - 1) < this.options.length) {
this.selectedArray.arr = this.selectedArray.arr.filter((item) => {
return item !== 'All'
})
}
},
// removeTag(val) {
// if (val === 'All') {
// this.selectedArray = []
// }
// }
}
})
</script>
</body>
</html>