全选在输入框中
<template>
<page-view :title="false">
<a-card :bordered="false">
<a-select
v-model="selectValue"
mode="multiple"
placeholder="请选择"
@change="selectAll"
style="width: 300px"
>
<a-select-option
v-for="item in options"
:key="item.value"
:title="item.label"
>
{{ item.label }}
</a-select-option>
</a-select>
</a-card>
</page-view>
</template>
<script>
import { PageView } from '@/layouts'
export default {
name: 'SelectTest',
components: {
PageView
},
data () {
return {
options: [
{
value: 'ALL_SELECT',
label: '全选'
},
{
value: 0,
label: '选项一'
},
{
value: 1,
label: '选项二'
},
{
value: 2,
label: '选项三'
}
],
selectValue: [],
oldOptions: []
}
},
methods: {
selectAll (val) {
const allValues = []
// 保留所有值
for (const item of this.options) {
allValues.push(item.value)
}
// 用来储存上一次的值,可以进行对比
const oldVal = this.oldOptions.length === 1 ? this.oldOptions[0] : []
// 若是全部选择
if (val.includes('ALL_SELECT')) this.selectValue = allValues
// 取消全部选中 上次有 当前没有 表示取消全选
if (oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) {
this.selectValue = []
}
// 点击非全部选中 需要排除全部选中 以及 当前点击的选项
// 新老数据都有全部选中
if (oldVal.includes('ALL_SELECT') && val.includes('ALL_SELECT')) {
const index = val.indexOf('ALL_SELECT')
val.splice(index, 1) // 排除全选选项
this.selectValue = val
}
// 全选未选 但是其他选项全部选上 则全选选上 上次和当前 都没有全选
if (!oldVal.includes('ALL_SELECT') && !val.includes('ALL_SELECT')) {
if (val.length === allValues.length - 1) {
this.selectValue = ['ALL_SELECT'].concat(val)
}
}
// 储存当前最后的结果 作为下次的老数据
this.oldOptions[0] = this.selectValue
}
}
}
</script>
<style scoped>
</style>
全选不在输入框中
<template>
<a-form-model-item
label="所属xx"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
>
<a-select
v-model="model.workType"
mode="multiple"
placeholder="请选择xx"
style="width:88%"
showArrow
@change="onChange"
>
<!-- 这个是自定义的一个全选项,展示在所有下拉项的顶部位置 -->
<a-select-option value="0" key="0">全选</a-select-option>
<!-- 下面的是正常要循环渲染的下拉项 -->
<a-select-option v-for="item in options" :value="item.key" :title="item.title">
{{ item.title }}
</a-select-option>
</a-select>
</a-form-model-item>
</template>
<script>
export default {
data() {
return {
model: {
workType:[],
},
labelCol: {
xs: { span: 24 },
sm: { span: 5 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 }
},
options: [
{title:'测试1',key: 1},
{title:'测试2',key:2},
{title:'测试3',key:3},
{title:'测试4',key:4}
],
// 处理选择好的workType数据格式,因为我这边后端需要的格式是字符串类型,并以逗号分隔
jobsStr: ''
}
},
created() {
this.initOptions()
},
methods: {
// 掉接口,获取下拉框数据赋值给options即可
initOptions() {
// axios请求获取数据......
},
onChange(val) {
// val 拿到的是数组格式的数据,比如:['测试1','测试3']
const res = this.model.workType.join(',')
this.jobsStr = res
this.model.workType = this.checkAll(val, this.options)
},
// 全选/全不选
checkAll(arr, modelList) {
// arr是onChange中的val数组 modelList是下拉框List
let length = arr.length
let list = arr
// 遍历已经选中的选项
arr.forEach(element => {
// 当数组中存在0,说明此时进行全选/取消全选
if (element === '0') {
// 当数组长度为最大长度且最后一个元素为0时,说明此时在全选的基础上又点击全选,则取消全选
if (length - 1 === modelList.length && arr[length - 1] === '0') {
list = []
// 取消全选时,jobsStr需要重置为空,否则全选的数据还会展示在下拉输入框中
this.jobsStr = ''
} else {
// 当不是取消全选操作,只要数组中出现了0则说明进行了全选操作
list = []
for (let i in modelList) {
list.push(modelList[i].title)
// 全选时,也需要给jobsStr 赋值,拿到所有的下拉选项,并进行数据格式转换
this.jobsStr = list.join(',')
}
}
}
})
return list
}
}
}
</script>