# element-table-plugin

> 基于Element，根据配置为网页添加表格

Latest version **1.0.9** (published 2020-12-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install element-table-plugin
pnpm add element-table-plugin
yarn add element-table-plugin
bun add element-table-plugin
```

## 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 | 1.0.9 |
| Published | 2020-12-11 |
| First published | 2020-09-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 26.6 KB |
| Known vulnerabilities | 0 (+26 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | hughe5 |
| Keywords | eleme, vue, components, table, plugin |

## Links

- npm: https://www.npmjs.com/package/element-table-plugin
- Repository: https://github.com/Hughe5/element-table-plugin
- Homepage: https://github.com/Hughe5/element-table-plugin#readme
- Issues: https://github.com/Hughe5/element-table-plugin/issues
- npm.io page: https://npm.io/package/element-table-plugin

## Dependencies (5)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [axios](https://npm.io/package/axios.md) ^0.20.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.20
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [element-ui](https://npm.io/package/element-ui.md) ^2.13.2

## 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

- 1.0.9 (latest) — 2020-12-11
- 1.0.8 — 2020-12-11
- 1.0.7 — 2020-12-11
- 1.0.6 — 2020-12-10
- 1.0.5 — 2020-12-10
- 1.0.4 — 2020-11-20
- 1.0.3 — 2020-11-18
- 1.0.2 — 2020-09-17
- 1.0.1 — 2020-09-17
- 1.0.0 — 2020-09-12

## README

# 表格插件

基于Element，根据配置为网页添加表格

## Features

- 展示静态数据
- 配置接口，自动请求，展示动态数据
- 分页、换页
- 统一的空数据时的展示效果
- 固定列、排序、设置列的宽度、控制列的展示
- 自定义列模板
- 鼠标浮在单元格上，展示完整内容，支持一键复制

## 引入

// main.js

``` javascript
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import elementTable from 'element-table-plugin'
import App from './App.vue'

Vue.use(ElementUI)
Vue.use(elementTable, { // 详见fields
  page: 'page',
  pageSize: 'limit',
  code: 'stat',
  apiSuccess: 1,
  data: 'data.list', // 取表格数据
  total: 'data.total', // 取总条数
})
// or
// Vue.use(elementTable)

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

// index.vue

``` html
<element-table
  :initRequest="request"
  :initColumns="columns"
  :canChangeColumns="canChangeColumns"
  :initPagination="pagination">
    <template #action="{row}">
      <span @click="edit(row)">编辑</span>
    </template>
</element-table>

<script>
export default {
  data () {
    return {
      request: {
        url: '/api/data/list',
        method: 'post',
      },
      columns: [
        {
          prop: 'name',
          label: '姓名',
          fixed: 'left',
          width: '280px',
        },
        {
          prop: 'desc',
          label: '描述',
          showOverflowPopover: true,
        },
        {
          prop: 'create_time',
          label: '创建时间',
          sortable: true,
        },
        {
          prop: 'action',
          label: '操作',
        }
      ],
      canChangeColumns: true,
      pagination: {
        pageSize: 20,
      },
    }
  },
  methods: {
    edit (row) {
      //
    },
  },
}
</script>
```

## props

### initRequest

- 请求表身，与axios中的一致，支持异步传入

- 类型：object

- 默认值：`{}`

### initFields

- 字段集

- 类型：object

- 默认值：`{}`

- 属性的列表：

| 参数 | 说明 | 类型 | required | 默认值 |
| - | - | - | - | - |
| page | 当前页 | string | false | - |
| pageSize | 每页条数 | string | false | - |
| code | 状态码 | string | false | - |
| apiSuccess | 成功的状态码的值 | number | false | - |
| data | 表身 | string | false | - |
| total | 总条目数 | string | false | - |

### initColumns

- 表头

- 类型：`Array<object>`

- 默认值：`[]`

- 元素的属性的列表：

| 参数 | 说明 | 类型 | required | 默认值 |
| - | - | - | - | - |
| prop | 列的prop，与Element中的一致 | string | true | - |
| label | 列的label，与Element中的一致 | string | false | - |
| align | 对齐方式，与Element中的一致 | string | false | - |
| width | 列的宽，与Element中的一致 | string | false | - |
| showOverflowPopover | 是否用浮层显示单元格的详情 | boolean | false | - |
| fixed | 固定列，与Element中的一致 | string &#124; boolean | false | - |
| sortable | 是否支持排序 | boolean | false | - |

### initData

- 表身，配了initRequest就不用传这个

- 类型：`Array<object>`

- 默认值：`[]`

### initPagination

- 分页

- 类型：object

- 属性的列表：

| 参数 | 说明 | 类型 | required | 默认值 |
| - | - | - | - | - |
| page | 当前页 | number | false | 1 |
| pageSize | 每页条数 | number | false | 30 |
| total | 总条目数 | number | false | 0 |

### maxHeight

- 表格的最大高度，与Element中的一致

## Methods

| 方法名 | 说明 |
| - | - |
| getFields | 返回表头和表身的数据 |

## slot

| name | 说明 |
| - | - |
| 列的prop | 自定义列的内容，参数为 { row } |

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