@mosowe2/element-pro：【proTable】基于elementUI2.x版本的高级表格

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

proTable

通过配置tableColumn，实现：

1. 自动生成table表格

2. 自动生成search表单

3. 搜索区屏幕大于等于1920时，一行4列，否则一行3列/2列/1列

4. 自动生成页码组件

5. 可编辑，可获取编辑后table数据

6. 内部翻页/页数修改等事件处理

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

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

9. 支持必填项搜索

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

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

12. 支持远程加载

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

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

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

16. 支持组件内部刷新

17. 支持多种插槽

18. 合并行/列

19. 。。。

Attributes

参数	说明	类型	必填	默认
requestMethod	数据获取的方法，接受一个promise返回的方法	function	是	-
autoRequest	是否自动请求数据	boolean	否	true
tableColumn	表格table-item配置及搜索配置	tableColumn	是	-
tableConfig	表格table配置，透传table的Attributes	obj	否	-
tableEvents	表格table的events，此处注意：不可使用驼峰替换短横线	obj	否	-
query	额外参数，表格初始化需要的除current和pageSize之外的其他参数，如果搜索栏有必填，也需要传入	obj	否	-
title	左上角表格名称	string	否	-
initBefore	表格渲染前数据处理	function	否	-
tableSourceKey	表格source数组字段	string	否	list
tableTotalKey	表格分页组件total字段	string	否	total
hideToolBar	表格顶上区域隐藏	boolean	否	false
rightToolBar	表格头部右侧操作按钮展示，多个英文逗号分割，可选：column列布局，density紧凑，refresh刷新	boolean/ string	否	true
pagination	页码设置{current，pageSize}，只有一页的时候隐藏不显示	object	否	{current：1，pageSize：10}
paginationShow	是否显示底部页码	boolean	否	true
defaultCollapseSearch	是否默认展开搜索区，或者默认展开多少项，点击收起的时候，只展示前两项	boolean / number	否	false
searchSubmitText	搜搜查询按钮文案	String	否	查询
searchResetText	搜索重置按钮文案	String	否	重置
columnSize	表格默认尺寸 ：default / small / mini	String	否	default
autoHeight	不限制高度，自动增加	Boolean	否	false
maxHeight	最大高度	string、number	否	-

示例结构

[
    {
        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-man,age-[1,2]', // 下级关联字段，本字段数据更新，下级关联字段清空,string，多个英文逗号分割，可使用短横线将默认值带上，字符串形式，可以是数组（多选组件）
            component: '', // 使用的组件，优先级高
            formProp: { // 透传proForm的属性
                component: 'Input', // 使用的组件
                options: { // 组件的配置信息
                    placeholder: '请输入',
                    clearable: true,
                },
                formItemOptions: {  // form-item的配置
                	// prop: 'name1', // 可不写，若有，此处的prop级别高于第一层的prop，用于搜索提交时的字段
                    // 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: '禁用'
        }
    },
]

tableColumn

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

属性	说明	类型	必填	默认
[table-item]	可接收formItem组件的Attributes		是
search	字段的搜索区配置，值为true，的时候会根据是否含有enum字段生成input组件或select组件	boolean / search	否	不生成搜索表单
hideInTable	不在表格中显示的字段，该字段可能用于搜索区	boolean	否	false
disabled	true：在表格中必须显示的列，针对的是表格右上角树形结构选项的用户自定义展示列	boolean	否	false
order	在搜索区的权重，越大越靠前，同级按配置的先后展示	number	否	-
tableOrder	在表格区的权重，越大越靠前，同级按配置的先后展示0712	number	否	-
enum	枚举，{key:value}形式，主要在select组件时使用，会主动在搜索区生成select下拉选项，若表格数据返回的是一个key，那么会根据这个返回对应的值展示在表格上	object	否	-
enumRemote	远程加载枚举，不是远程搜索，使用此方法是在搜索下拉需要远程，但是该表单元素需要初始值且来自远程加载，当含有此属性时，表格的自动初始加载会在该方法全部调用完毕后触发20220706	function（form，callback）	否	-
edit	是否可编辑	bool / function	否	false
editBlur	可编辑框失去焦点事件，返回五个参数：value当前值, event当前单元格编辑框, item当前column配置项, data当前行属性, table当前表格组件实例，可以获取到表格数据	function	否	-
required	表头显示必填*号	boolean	否	-

tableColumn.search

属性	说明	类型	必填	默认
formProp	接收的内容是proFom的配置数据groupFormItems[prop]下的配置{components，options，formItemOptions}，其中相关的col已被组件写死，不可修改，若没有此字段，将会根据component（若有）选择组件，若没有component则会自动选择相关组件，formItemOptions下的prop在搜索区的优先级高于第一层级的prop	proForm:options.list.[groupKeyName].groupFormItems[prop]	是	-
component	使用的组件名称，同formProp.component，优先级最高	string	否	-
unionProp	下级关联字段，本字段数据更新，下级关联字段清空，或者使用短横线将默认值带上，多个英文逗号分割，与change事件不能同时使用，如需额外的操作，可以同时使用requestMethods	string	否	-
transform	需要转换的字段，一般用于时间范围，级联等组件时使用	function	否	-
requestMethods	当该项值发生变化后，需要处理的事件，比如修改相关select的下拉选项enum。回调：e-当前值,form-表单实例。相关事件应在配置前声明，有点类似于events里的change	function	否	-
events	该值表单的相关事件，同proFom，但是不需要[prop]属性	function

events

事件	说明
currentChange	页码改变时触发，返回当前值及一个callback，需要callback一个boolean告诉组件是否跳转，否则不跳转，并更改页面为点击前页码
sizeChange	页数改变时触发，返回当前值及一个callback，需要callback一个boolean告诉组件是否修改，否则不修改，并更改页数为点击前页数
searchChange	搜索表单值改变时触发，返回表单当前值
editBlur	监听表格所有可编辑单元格的失去焦点事件，返回五个参数：value当前值, event当前单元格编辑框, item当前column配置项, data当前行属性, table当前表格组件实例，可以获取到表格数据

slot

slot	说明
[prop]-default	表格table-item的默认插槽
[prop]-header	表格table-item的header插槽
expand-defoult	展开行插槽
append	表尾合计插槽
toolbar	表格头部左侧插槽
toolbar-right	表格头部右侧插槽
tool-handle	搜索区下方，表格头部上方区域插槽
pagination-left	分页区左侧插槽
footer	组件底部插槽，在分页区下方
search-bar	搜索区插槽，覆盖整个搜索区
[prop]	搜索区表单组件插槽
[prop]-label	搜索区表单组件label插槽
search-btn	搜索区按钮插槽
search-btn-after	搜索区搜索按钮后面插槽，展开收起前面
search-btn-before	搜索区搜索按钮前面插槽

使用方法

安装

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) // 配置
// 或
// Vue.use(elementPro,{
//   tableEmptyImage: impotImage, // 表格没数据的时候图片，默认无
//   tableEmptyText: '客观没有数据哦' // 表格没数据的时候文案，默认：暂无数据
// })

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

使用

.vue文件中直接使用

<proTable
...配置
>proTable>

代码示例

ppt配置详解