Rework-table NPM

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	expanded)

例子

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

import CommonTable from "rework-table"

Vue.use(CommonTable) vue2.x

app.use(CommonTable) vue3.x

<template>
  <div>
    <h2>vue2.x写法,版本2.0以下</h2>
    <common-table :data='data' :config="config" :columns="columns"></common-table>
    <h2>vue3.x写法,版本2.0以上</h2>
    <h2>想拖拽表格，drag必须是'true',若对拖拽有个性化需求,可以在options传入自己需要的属性;如果没有,options可以不传入,即可拖拽</h2>
    <common-table v-model='data' :config="config" :columns="columns" :drag="true" :options="options"></common-table>
  </div>
</template>

<script>
data(){
    return {
        config:{
            slots:{
                default:(props)=>{
                            return (
                                <span>天</span>
                            )
                        },//匿名插槽
                append:()=>{
                    return (
                    <div>123</div>
                    )
                },    //el-table支持的插槽
            },
            script:true,
            on:{
                select:(selection, row)=>{
                  
                },//通过render函数的方式调用组件传出的事件;不能与在组件上绑定传出事件同时使用；只能选其一
            },  // vue2.x的写法 只在vue2.x生效
            onSelect:(selection, row)=>{} // vue3.x的写法 只在vue3.x生效
        },
        data:[],
        columns:[
            {  
                label:'姓名',
                props:'name',
                scopedSlots:{
                        heander:(props)=>{
                            return (
                                <span>天</span>
                            )
                        },//具名作用域插槽
                        default:(props)=>{
                            return (
                                <span>天</span>
                            )
                        },//匿名作用域插槽
                }, //表格列作用域插槽写法 距离是该组件有一个header的作用域插槽 vue2.x写法 只在vue2.x生效
                slots:{
                        heander:(props)=>{
                            return (
                                <span>天</span>
                            )
                        },//具名作用域插槽
                        default:(props)=>{
                            return (
                                <span>天</span>
                            )
                        },//匿名作用域插槽
                }, //表格列作用域插槽写法 距离是该组件有一个header的作用域插槽 vue3.x写法 只在vue3.x生效
                children:[
                    {
                      label:'性别',
                      props:'sex',
                      ...
                    },
                    {
                      label:'年龄',
                      props:'age',
                      ...
                    }
                ], //vue3.x中才有该属性，用于多级表头
            }
        ],
        options:{
            sort:true
        }  //具体查看sortablejs的options属性,它的事件大部分禁用了
    }
}