vue + Ant Design 表格多选 mixin

/**
 * 用于 mixin 表格多选 
 **/

export const rowSelectionMixin = {
    data() {
        return {
            /* table选中keys*/
            selectedRowKeys: [],
            /* table选中records*/
            selectionRows: [],
        }
    },
    computed: {
        rowSelection() {
            return {
                selectedRowKeys: this.selectedRowKeys,
                onChange: this.onSelectChange,
                getCheckboxProps: record => ({
                    props: {
                        /** 禁止选择行
                         *  默认不禁止任何行，如果有需要 可以通过 disabledRow 方法进行操作
                         *  在表格数组改变的时候，会调用此处回调，如果禁止选择条件变化，需要重新对表格数据进行赋值
                         *  e.g: this.dataSource = [...this.dataSource]
                         *  改变禁止选择条件时，要先清空之前选择的数据
                         */
                        disabled: this.disabledRow ? this.disabledRow(record) : false
                    }
                })
            }
        }
    },
    methods: {
        // 此方法不传参数默认取消选择框，但是当此方法在 组件中直接调用时，要注意加()，因为不加会默认传一个点击事件的对象过来，会报错
        onSelectChange(selectedRowKeys = [], selectionRows = []) {
            console.log(selectedRowKeys);
            this.selectedRowKeys = selectedRowKeys;
            this.selectionRows = selectionRows;
        },
        // 批量操作
        /** 
         * 传入一个回调函数，此处进行默认判断空减少重复操作 
         * 例子： @click="batchOperation(()=>changeHeadTeacher('selectedRows',12313))"
         * 加一个空方法来中转，因为 @click="batchOperation(changeHeadTeacher('selectedRows',12313))" 会将执行完的方法的返回值作为参数传进来
         */
        batchOperation(callback = () => {}) {
            console.log(callback);
            if (this.selectedRowKeys.length > 0) callback();
            else this.$message.warning("至少选择一条数据！")
        }
    }
}

vue 富文本图片上传处理
vue Ant Design Select 选择框输入搜索已有数据 mixin