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属性,它的事件大部分禁用了
    }
}