CommonTable

该组件采用jsx写法；对于组件的插槽放在config.slots;及作用域插槽放在scopedSlots中 由于jsx写法; 在vue2.x中通过config.on的方式调用组件传出的事件；不能再在组件上绑定传出的事件;否则会报错; 包2.0以上适合vue3.x ;2.0以下适合vue2.x

Props

Name	Description	Type	Required	Default
data	table展示的数据vue2.x	Array	false	[]
modelValue	table展示的数据vue3.x	Array	false	[]
columns	表格单元列展示的内容	Array	false	[]
config	table除data外其他的配置	Object	false	{}
drag	配置table是否开启拖拽,2.0.4版本以上的才有该属性	Boolean	false	false
options	对拖拽table的详细配置；具体查看sortablejs的options	Object	false	{}

Events

Event Name	Description	Parameters
drag-change	拖拽列表排序时触发的事件,2.0.6以上有该事件	data
select	当用户手动勾选数据行的 Checkbox 时触发的事件	selection, row
select-all	当用户手动勾选全选 Checkbox 时触发的事件	-
selection-change	当选择项发生变化时会触发该事件	selection
cell-mouse-enter	cell-mouse-enter 当单元格 hover 进入时会触发该事件	row, column, cell, event
cell-mouse-leave	当单元格 hover 退出时会触发该事件	row, column, cell, event
cell-click	当某个单元格被点击时会触发该事件	row, column, cell, event
cell-dblclick	当某个单元格被双击击时会触发该事件	row, column, cell, event
row-click	当某一行被点击时会触发该事件	row, column, event
row-contextmenu	当某一行被鼠标右键点击时会触发该事件	row, column, event
row-dblclick	当某一行被双击时会触发该事件	row, column, event
header-click	当某一列的表头被点击时会触发该事件	column, event
header-contextmenu	当某一列的表头被鼠标右键点击时触发该事件	column, event
sort-change	当表格的排序条件发生变化的时候会触发该事件	{ column, prop, order }
filter-change	当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组	filters
current-change	当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性	currentRow,oldCurrentRow
header-dragend	当拖动表头改变了列的宽度的时候会触发该事件	newWidth, oldWidth, column, event
expand-change	当用户对某一行展开或者关闭的时候会触发该事件（展开行时，回调的第二个参数为 expandedRows；树形表格时第二参数为 expanded）	row, (expandedRows

例子

• 安装 npm install rework-table sortablejs -D
• 使用

import CommonTable from "rework-table"

Vue.use(CommonTable) vue2.x

app.use(CommonTable) vue3.x

1<template>
2  <div>
3    <h2>vue2.x写法,版本2.0以下</h2>
4    <common-table :data='data' :config="config" :columns="columns"></common-table>
5    <h2>vue3.x写法,版本2.0以上</h2>
6    <h2>想拖拽表格，drag必须是'true',若对拖拽有个性化需求,可以在options传入自己需要的属性;如果没有,options可以不传入,即可拖拽</h2>
7    <common-table v-model='data' :config="config" :columns="columns" :drag="true" :options="options"></common-table>
8  </div>
9</template>
10
11<script>
12data(){
13    return {
14        config:{
15            slots:{
16                default:(props)=>{
17                            return (
18                                <span>天</span>
19                            )
20                        },//匿名插槽
21                append:()=>{
22                    return (
23                    <div>123</div>
24                    )
25                },    //el-table支持的插槽
26            },
27            script:true,
28            on:{
29                select:(selection, row)=>{
30                  
31                },//通过render函数的方式调用组件传出的事件;不能与在组件上绑定传出事件同时使用；只能选其一
32            },  // vue2.x的写法 只在vue2.x生效
33            onSelect:(selection, row)=>{} // vue3.x的写法 只在vue3.x生效
34        },
35        data:[],
36        columns:[
37            {  
38                label:'姓名',
39                props:'name',
40                scopedSlots:{
41                        heander:(props)=>{
42                            return (
43                                <span>天</span>
44                            )
45                        },//具名作用域插槽
46                        default:(props)=>{
47                            return (
48                                <span>天</span>
49                            )
50                        },//匿名作用域插槽
51                }, //表格列作用域插槽写法 距离是该组件有一个header的作用域插槽 vue2.x写法 只在vue2.x生效
52                slots:{
53                        heander:(props)=>{
54                            return (
55                                <span>天</span>
56                            )
57                        },//具名作用域插槽
58                        default:(props)=>{
59                            return (
60                                <span>天</span>
61                            )
62                        },//匿名作用域插槽
63                }, //表格列作用域插槽写法 距离是该组件有一个header的作用域插槽 vue3.x写法 只在vue3.x生效
64                children:[
65                    {
66                      label:'性别',
67                      props:'sex',
68                      ...
69                    },
70                    {
71                      label:'年龄',
72                      props:'age',
73                      ...
74                    }
75                ], //vue3.x中才有该属性，用于多级表头
76            }
77        ],
78        options:{
79            sort:true
80        }  //具体查看sortablejs的options属性,它的事件大部分禁用了
81    }
82}