# rework-table

> 这是对el-table表格的二次封装

Latest version **2.1.2** (published 2023-06-28) · 0 weekly downloads

## Install

```sh
npm install rework-table
pnpm add rework-table
yarn add rework-table
bun add rework-table
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.2 |
| Published | 2023-06-28 |
| First published | 2022-07-20 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 104.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | naughty_rose |
| Keywords | vue3.0, vue2.0, vue, jsx, el-table, 自定义table, 拖拽, draggable, drag |

## Links

- npm: https://www.npmjs.com/package/rework-table
- Repository: https://gitee.com/yzhno1/base-table-v3
- npm.io page: https://npm.io/package/rework-table

## Dependencies (1)

- [sortablejs](https://npm.io/package/sortablejs.md) ^1.15.0

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 2.1.2 (latest) — 2023-06-28
- 2.0.0-beta.2 (beta) — 2022-09-20
- 2.1.1 — 2023-05-23
- 2.1.0 — 2023-05-22
- 2.0.9 — 2023-05-22
- 2.0.8 — 2023-05-22
- 2.0.7 — 2023-05-16
- 2.0.6 — 2023-05-11
- 2.0.5 — 2023-05-08
- 2.0.4 — 2023-05-08
- 2.0.3 — 2022-09-20
- 2.0.2 — 2022-09-20
- 2.0.1 — 2022-09-20
- 2.0.0-beta.1 — 2022-09-20
- 2.0.0-beta.0 — 2022-09-20
- … 1 more at https://npm.io/package/rework-table/versions

## README

# CommonTable

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

## Props

<!-- @vuese:CommonTable:props:start -->
|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`|{}|

<!-- @vuese:CommonTable:props:end -->


## Events

<!-- @vuese:CommonTable:events:start -->
|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)|

<!-- @vuese:CommonTable:events:end -->







## 例子
* 安装 npm install rework-table sortablejs -D 
* 使用
# import CommonTable from "rework-table"

# Vue.use(CommonTable) vue2.x
# app.use(CommonTable) vue3.x

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

---
_Source: https://npm.io/package/rework-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._