cus-table | 使 antd vue table 组件更简单

文档

• 官网 - 使用文档

特性

该组件的思路就是以一个 table 对象来做所有的操作， crud 集中管理，更加简单明了。

• 保持灵活性，不破坏antd的任何属性，极简的思想，更少的代码，更多的功能，更快速的开发
• 支持 antd vue 组件的所有 api, slot, event, method
• 纯数据配置
• 集成分页组件

todo

• 全局配置 （分页参数key指定 共有columns属性复用等）
• 虚拟滚动
• actions字段支持动态项及对应事件操作

安装使用

npm install acus-table --save

如此简单

<template>
    <cus-table v-model="table"></cus-table>
</template>

<script>
export default {
    data() {
        return {
            /*table对象支持antd的所有属性*/
            table: {
                'data-source': data,
                border: true,
                stripe: true,
                height: 400,
                lazy: true,
                rowKey: 'index',
                query: { pageSize: 3 },
                loading: false,
                /*指定请求接口 分页变化等自动调用*/
                request: () => {
                    this.table.loading = true
                    this.http(this.table.query)
                            .then((res) => {
                                console.log('res', res)
                                this.table['data-source'] = res.data
                                this.table.page.total = res.total
                                this.table.loading = false
                            })
                            .catch(() => {
                                this.table.loading = false
                            })
                },
                columns: [
                    {
                        title: '#',
                        type: 'indexColumn',
                        width: 80,
                        fixed: true,
                        customRender: function(text) {
                            return text.index + 1
                        },
                    },
                    { title: '日期', dataIndex: 'date' },
                    {
                        title: '姓名',
                        dataIndex: 'name',
                        width: 80,
                        scopedSlots: { customRender: 'name' },
                        sortable: true,
                    },
                    {
                        title: '性别',
                        dataIndex: 'sex',
                        filters: [
                            { text: '男', value: '男' },
                            { text: '女', value: '女' },
                        ],
                    },
                    {
                        title: '年龄',
                        dataIndex: 'age',
                    },
                    {
                        title: '地址',
                        dataIndex: 'address',
                    },
                    {
                        title: '操作',
                        type: 'action',
                    },
                ],
                page: {
                    enable: true,
                    height: 50,
                    total: 100,
                    'show-size-changer': true,
                },
                /*操作列 编辑删除 一键回调*/
                actions: {
                    enable: true,
                    fixed: 'right',
                    onEdit: (row) => {
                        this.$notification.open({
                            message: '编辑',
                            description: JSON.stringify(row),
                            icon: <a-icon type="smile" style="color: #108ee9" />,
                        })
                    },
                    onDel: (row) => {
                        this.$notification.open({
                            message: '删除',
                            description: JSON.stringify(row),
                            icon: <a-icon type="smile" style="color: #108ee9" />,
                        })
                    },
                },
                /*增加支持分页变动 选择项变动事件 并且antd的 所有事件 */
                on: {
                    selectionChange: (keys, rows) => {
                        this.$notification.open({
                            message: '选择的行',
                            description: JSON.stringify(rows),
                            icon: <a-icon type="smile" style="color: #108ee9" />,
                        })
                        console.log('选择的行', rows)
                    },
                    change: (page) => {
                        console.log('页码改变:', page)
                    },
                    showSizeChange: (size) => {
                        console.log('size改变:', size)
                    },
                },
            },
        };
    },
};
</script>