proTable：基于elementUI2.x版本的高级表格

【基于vue2+element+@vue/composition-api】
用过antd高级组件的应该有点印象，我这就是参考antd高级组件编写的，尽最大可能的把每个组件原有的element相关的属性方法都还原，已下功能是都有的也测试过了：

通过配置tableColumn，实现：

1. 自动生成table表格

2. 自动生成search表单

3. 自动生成页码组件

4. 单元格可编辑，可获取编辑后table数据，通过组件ref

5. 内部翻页/页数修改/搜索等事件处理

6. 可拦截翻页/页数修改

7. 搜索栏默认收起，可展开

8. 支持必填项搜索

9. 支持表格单元/表头插槽

10. 支持搜索表单单元联动

11. 支持远程加载

12. 支持搜索单元lable、value插槽

13. 支持用户表格紧凑度改变

14. 支持用户表格展示项改变

15. 支持组件内部刷新

16. 支持多种插槽

17. 合并行/列

18. 。。。

示例结构

[
    {
        fixed: 'left',  // 序号
        type: "index",
    },
    {
        fixed: 'left', // 展开行
        type: "expand",
    },
    {
        fixed: 'left', // 多选
        type: "selection",
    },
    {
        label: '姓名', // 表头
        prop: 'name', // 关键字
        width: 200, // 宽度
        // search: true, // 搜索区配置 bool / obj ， bool时会根据是否有enum生成对应表单
        search: {
            unionProp: 'sex,age', // 下级关联字段，本字段数据更新，下级关联字段清空,string，多个英文逗号分割
            component: '', // 使用的组件，优先级高
            formProp: { // 透传proForm的属性
                component: 'Input', // 使用的组件
                options: { // 组件的配置信息
                    placeholder: '请输入',
                    clearable: true,
                },
                formItemOptions: {  // form-item的配置
                    // label: '姓名', // 可不写，前面的label一直，配置则按此处的显式在搜索区
                    rules: [
                        {
                            required: true,
                            message: '姓名必填！'
                        }
                    ]
                }
            },
            transform: (value) => ({ startTime: value[0], endTime: value[1] }), // 需要转换的字段，一般用于时间范围，级联等组件时使用
            requestMethods: statusChange,  // 当该项值发生变化后，需要处理的事件，比如修改相关select的下拉选项enum。回调：e-当前值,form-表单实例，statusChange应在配置前声明
        }, // 开启搜索,boolean / {transform}，search字段会默认为false，需要成为搜索栏的要显式定义
        hideInTable: false, // 在表格中隐藏，hideInTable只会存在一级列表里面，主要用于需要在搜索栏展示不需要在表格展示的字段，或者同一类型的表格字段和搜索字段不一致的情况
        disabled: true, // 在表格中必须显示的列，针对的是表格右上角树形结构选项的用户自定义展示列
        order: 1, // search表单权重，越大越靠前
        enum: {  // 枚举，表格会根据枚举自动渲染，key：value格式
            1: '启用',
            0: '禁用'
        },
        edit: true,
        editBlur: (value, event, column, row, table) => {}
    },
]

主要的配置是el-table-item的prop，新增其他的配置项

npm i @mosowe2/element-pro

main.js配置，因为是依赖@vue/composition-api和element-ui，所以这两个也是要安装和配置的

import Vue from 'vue';
import VueCompositionApi from '@vue/composition-api';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import router from './router';
import ElementPro from '@mosowe2/element-pro' // 引入


Vue.config.productionTip = false;
Vue.config.silent = true;
Vue.use(VueCompositionApi);
Vue.use(ElementUI,{size:'mini'});
Vue.use(ElementPro) // 配置

new Vue({
  router,
  render: (h) => h(App),
}).$mount('#app');

.vue文件中直接使用