ant design vue下拉框全选

qq_40055200

已于 2023-02-24 14:39:27 修改

阅读量2.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js javascript ecmascript

于 2023-02-22 16:31:03 首次发布

本文链接：https://blog.csdn.net/qq_40055200/article/details/129165261

文章展示了如何在Vue.js中创建一个多选Select组件，并实现全选和取消全选的功能。通过监听`@change`事件，动态更新选中值，并处理全选选项的状态变化。代码示例包括两种不同的全选实现方式，一种是在输入框中显示全选选项，另一种是将全选选项置于下拉列表顶部。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全选在输入框中

<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>