antd-vue Checkbox Group 封装实现多选、全选、搜索过滤组件

实现效果：

 说明：

基于antd实现搜索，全选，多选功能，并且支持保存，重置，初始默认选中项。

注意事项：

我的列表格式是这样的

[
    { code: 1, name: '停车场1' },
    { code: 2, name: '停车场2' },
    { code: 3, name: '停车场3' },
    { code: 4, name: '停车场4' },
    { code: 5, name: '停车场5' },
    { code: 6, name: '停车场6' },
    { code: 7, name: '停车场7' },
    { code: 8, name: '停车场8' },
    { code: 9, name: '停车场9' },
]

所以需要注意的是checkbox上绑定的value要是code，不然group是找不到对应的值。

checkbox-group v-model对应的是选中的arr，格式是[1, 2, 3, 4]这样的，所以保存时候要取交集。

具体代码：

html部分：

<template>
    <a-modal
      v-model="visible"
      :title="title"
      :width="width"
      @ok="save"
      okText="确定"
      cancelText="关闭"
    >
      <a-form-model
        ref="ruleForm"
      >
        <a-form-model-item v-if="isShowSearch">
            <a-input v-model="parkingName" style="width: 280px" placeholder="搜索停车场" />
        </a-form-model-item>
        <a-form-model-item>
            <!-- 全选 -->
            <a-checkbox
                v-if="parkingList && parkingList.length"
                v-model="checkAll"
                :indeterminate="indeterminate"
                @change="onCheckAllChange"
            >
                全选
            </a-checkbox>
            <!-- 列表 -->
            <a-checkbox-group v-model="checkedList" style="width: 100%;max-height:300px;overflow-y:scroll;">
                <a-row>
                    <a-col :span="checkboxSpan" :key="item.code" v-for="(item) in parkingList" style="padding: 10px 0;">
                        <a-checkbox :value="item.code">{{item.name}}</a-checkbox>
                    </a-col>
                </a-row>
            </a-checkbox-group>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
</template>

js部分：

<script>
export default {
    name: 'CheckboxList', //复选框列表
    props: {
        title: {
            type: String
        },
        list: {
            type: Array
        },
        width: {
            type: Number,
            default: 1000
        },
        // 是否开启搜索功能
        isShowSearch: {
            type: Boolean,
            default: true
        },
        checkboxSpan: {
            type: Number,
            default: 8
        },
        // 初始默认选中项
        initCheckedList: {
            type: Array
        },
    },
    data() {
        return {
            parkingName: '',
            visible: false,
            parkingList: [],
            indeterminate: false,
            checkAll: false,
            checkedList: []
        }
    },
    watch: {
        list: {
            handler(newD) {
                this.parkingList = newD;
            },
        },
        initCheckedList: {
            handler(newD) {
                this.checkedList = newD;
            },
        },
        // 根据搜索名称过滤列表
        parkingName: {
            handler(newD) {
                if (this.list) {
                    this.checkedList = [];
                    this.indeterminate = false;
                    this.checkAll = false;
                    if (newD === "") {
                        this.parkingList = this.list;
                    } else {
                        this.parkingList = this.list.filter((item) => {
                            return item.name.includes(newD);
                        });
                    }
                }
            },
        },
        checkedList: {
            handler(val) {
                this.indeterminate = !!val.length && val.length < this.parkingList.length;
                this.checkAll = val.length > 0 && val.length === this.parkingList.length;
            },
        },
    },
    methods: {
        onCheckAllChange(e) {
            this.checkedList = e.target.checked ? this.parkingList.map(item => item.code) : [];
            this.indeterminate = false;
        },
        showModal() {
            this.visible = true;
        },
        save() {
            let checkedList = this.checkedList;
            let list = this.list;
            let intersection = [];
            // 取交集
            for (let i = 0; i < list.length; i++) {
                const item = list[i];
                for (let j = 0; j < checkedList.length; j++) {
                    const items = checkedList[j];
                    if(item.code == items){
                        intersection.push(item);
                    }
                }
            }
            this.$emit('checkedListChange', intersection);
            this.visible = false;
        },
        reset() {
            this.checkedList = [];
            this.indeterminate = false;
            this.checkAll = false;
        }
    },
}

</script>