【Antd+vue】Ant Design Select支持一键全选/空选

业务场景

在使用Ant Design的Select组件时，难免会遇到需要一键全选的场景。如果把额外的按钮放在Select框外面，会不那么美观。因此，我利用了 dropdownRender 对下拉菜单进行自由扩展，实现了下面的效果：

代码演示

下面演示了，select在表单中使用的方法。当然了，select也可以通过v-model进行绑定，在selectAll和clearAll函数中进行赋值即可。
主要是添加了maxTagCount属性，控制当前仅显示多少个tag；合理运用dropdownRender

<template>
  <a-card>
    <a-form :form="form">
      <a-form-item label="员工">
        <a-select
          v-decorator="['staff']"
          :loading="selectOptionsLoading"
          placeholder="这里是展示一键全选/清空的demo"
          option-filter-prop="children"
          mode="multiple"
          :maxTagCount="3"
        >
          <div slot="dropdownRender" slot-scope="menu">
            <v-nodes :vnodes="menu" />
            <a-divider style="margin: 4px 0;" />
            <div style="padding: 4px 8px; cursor: pointer;" @mousedown="e => e.preventDefault()">
              <a-button type="link" @click="selectAll">全选</a-button>
              <a-button type="link" @click="clearAll">清空</a-button>
            </div>
          </div>
          <a-select-option v-for="item in selectOptions" :value="item.mockKey" :key="item.mockKey">
            {{ item.mockLabel }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </a-card>
</template>

import { fetchListForDemo2 } from '@/api/public'
export default {
  name: 'BaseForm',
  components: {
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes
    }
  },
  data () {
    return {
      form: this.$form.createForm(this),
      selectOptions: [],
      selectOptionsLoading: false
    }
  },
  mounted () {
    this.getMemberList()
  },
  methods: {
  	// 获取数据源，根据实际自己改
    getMemberList () {
      this.selectOptionsLoading = false
      fetchListForDemo2().then(res => {
        this.selectOptionsLoading = false
        if (res.code === 200) {
          this.selectOptions = res.rows
        } else {
          this.$message.error(res.msg, 5)
        }
      })
    },
    // 全选 -- 把数据源赋给select绑定的值
    selectAll () {
      const arr = [];
      (this.selectOptions).forEach(item => {
        arr.push(item.mockKey)
      })
      this.form.setFieldsValue({
        staff: arr
      })
    },
    // 清空 -- 清空select绑定的值
    clearAll () {
      this.form.setFieldsValue({
        staff: []
      })
    }
  }
}