# ele-tables

Latest version **1.0.5** (published 2019-09-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install ele-tables
pnpm add ele-tables
yarn add ele-tables
bun add ele-tables
```

## 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.5 |
| Published | 2019-09-18 |
| First published | 2019-09-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 169.6 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | cqh52306 |
| Maintainers | cqh52306 |
| Keywords | vue, element ui, el-table, ele-tables |

## Links

- npm: https://www.npmjs.com/package/ele-tables
- Homepage: https://github.com/cqh52306/ele-tables
- npm.io page: https://npm.io/package/ele-tables

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.6.10
- [core-js](https://npm.io/package/core-js.md) ^2.6.5
- [element-ui](https://npm.io/package/element-ui.md) ^2.12.0
- [vue-router](https://npm.io/package/vue-router.md) ^2.0.3

## 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.5 (latest) — 2019-09-18
- 1.0.4 — 2019-09-18
- 1.0.3 — 2019-09-12
- 1.0.2 — 2019-09-10
- 1.0.1 — 2019-09-10
- 1.0.0 — 2019-09-10

## README

<!--
 * @Descripttion:
 * @version:
 * @Author: caoqinghua
 * @Date: 2019-08-26 20:16:30
 * @LastEditors: caoqinghua
 * @LastEditTime: 2019-09-12 13:50:48
 -->

# ele-tables

## 一、使用方式

- 1、安装

  ```shell
  npm install ele-tables
  或者
  yarn add ele-tables
  ```

- 2、在项目中的`main.js`文件中引入

  ```js
  import EleTables from "ele-tables"
  import "ele-tables/lib/ele-tables.css"
  Vue.use(EleTables)
  ```

* 3、组件中使用

  ```html
  <template>
    <div id="app">
      <ele-tables
        :pagination="pagination"
        :route-change="handleRouteChange"
        :config="tablesConfig"
        :table-data="interfaceData"
      ></ele-tables>
    </div>
  </template>

  <script>
    export default {
      name: "app",
      data() {
        return {
          pagination: {
            pageSize: 20, // 每页显示条目个数
            pageSizes: [20, 50], // 每页显示个数选择器的选项设置
            layout: "total, sizes, prev, pager, next" //, jumper组件布局，子组件名用逗号分隔
          },
          tablesConfig: {
            needPagination: true, // 是否需要分页
            tableRows: [
              { prop: "productName", label: "产品名称" },
              { prop: "name", label: "姓名" },
              { prop: "mobile", label: "手机号", width: 130 },
              { prop: "certNo", label: "身份证号" },
              {
                prop: "startTime",
                label: "开始时间",
                width: 180,
                type: "yy-mm-dd-hh-mm-ss" // 内置两类日期时间格式化yy-mm-dd-hh-mm-ss 和 yy-mm-dd
              },
              {
                prop: "",
                label: "操作",
                operArr: [
                  {
                    name: "详情",
                    permission: true,
                    openDialog: row => {
                      this.openDialog(row, col)
                    }
                  },
                  { name: "编辑", permission: true }
                ]
              }
            ]
          },
          interfaceData: {
            list: [
              {
                productName: "微信",
                name: "张三",
                mobile: "185****3322",
                certNo: "3101011995030*****",
                startTime: new Date()
              }
            ],
            rowCount: 1
          }
        }
      },
      methods: {
        handleRouteChange(params) {
          const { type } = params
          if (type == "change") {
            console.log("参数改变，请求后端接口")
          }
        },
        openDialog() {}
      }
    }
  </script>
  ```

## 二、主要的`API`

|      参数      |    类型    | 说明                                      | 默认值 |
| :------------: | :--------: | ----------------------------------------- | ------ |
|  `pagination`  |  `Object`  | 配置分页                                  | 空     |
| `route-change` | `Function` | 路由改变执行函数                          |        |
|    `config`    |  `Object`  | 表格配置项，具体如上                      | `{}`   |
|  `table-data`  |  `Object`  | 后端接口数据，list:列表,rowCount:分页条数 |        |

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