# bi-element-ui

> 基于 bi-eleme 编写的企业级 Vue 2 UI 组件库

Latest version **1.6.18** (published 2026-09-10) · 0 weekly downloads

## Install

```sh
npm install bi-element-ui
pnpm add bi-element-ui
yarn add bi-element-ui
bun add bi-element-ui
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; large bundle.

## Facts

| | |
|---|---|
| Version | 1.6.18 |
| Published | 2026-09-10 |
| First published | 2021-08-23 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=14.0.0 |
| Dependencies | 14 |
| Unpacked size | 11.7 MB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | wheatmilk, npmgjh, paidaxing3213, zhangdapeng1205, maoxiya |

## Links

- npm: https://www.npmjs.com/package/bi-element-ui
- npm.io page: https://npm.io/package/bi-element-ui

## Dependencies (14)

- [quill](https://npm.io/package/quill.md) 1.3.7
- [ali-oss](https://npm.io/package/ali-oss.md) ^6.21.0
- [install](https://npm.io/package/install.md) ^0.13.0
- [prettier](https://npm.io/package/prettier.md) ^2.8.8
- [crypto-js](https://npm.io/package/crypto-js.md) ^4.2.0
- [dompurify](https://npm.io/package/dompurify.md) ^3.2.4
- [js-cookie](https://npm.io/package/js-cookie.md) ^3.0.1
- [caniuse-lite](https://npm.io/package/caniuse-lite.md) ^1.0.30001724
- [vuedraggable](https://npm.io/package/vuedraggable.md) 2.24.3
- [gemini-scrollbar](https://npm.io/package/gemini-scrollbar.md) ^1.5.3
- [vue-quill-editor](https://npm.io/package/vue-quill-editor.md) 3.0.6
- [throttle-debounce](https://npm.io/package/throttle-debounce.md) ^1.1.0
- [@cell-x/el-table-sticky](https://npm.io/package/@cell-x/el-table-sticky.md) ^1.0.2
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) 1.5.1

## Recent versions

- 1.6.18 (latest) — 2026-09-10
- 1.6.18-beta.2 (beta) — 2026-09-09
- 1.6.18-beta.1 — 2026-09-09
- 1.6.17 — 2026-08-27
- 1.6.17-beta.3 — 2026-08-12
- 1.6.17-beta.2 — 2026-08-12
- 1.6.17-beta.1 — 2026-08-12
- 1.6.16 — 2026-06-27
- 1.6.16-beta.1 — 2026-06-27
- 1.6.15 — 2026-06-27
- 1.6.15-beta.2 — 2026-06-27
- 1.6.15-beta.1 — 2026-06-16
- 1.6.14 — 2026-05-28
- 1.6.14-beta.9 — 2026-05-25
- 1.6.14-beta.8 — 2026-05-22
- … 211 more at https://npm.io/package/bi-element-ui/versions

## README

# vue-free-table

> 基于 element ui table 二次封装，几乎支持原 table 所有的功能

### 文档使用

**[DEMO 预览](http://ui.zwwlkj01.top/#/)**

**特性**

- 以 element-ui table 为基础进行二次封装，减少代码量
- 继承 element-ui table 组件的参数及事件
- 支持 render 渲染
- 支持 slot 插槽
- 支持组件引入
- 支持树形数据
- 支持分页功能

**文档**

| 属性            | 说明                                               | 类型      | 默认    |
| --------------- | -------------------------------------------------- | --------- | ------- |
| `data`          | table 的 `data` 属性                               | `Array`   | `[]`    |
| `column`        | 用于控制表格列渲染                                 | `Array`   | `[]`    |
| `columns-props` | 用于定义所有 `column` 公共的属性                   | `Object`  |         |
| `pagination`    | 是否显示分页组件, 具体详细请看`pagination配置`栏目 | `Boolean` | `false` |

只是在 Element Table 封装了一层，原本设置在 Table 上的 props 与事件监听和设置都可以直接绑定到组件上，具体配置可参考[Element Tabel](https://element.eleme.io/#/zh-CN/component/table#table-attributes) 文档

**column 配置**
column 用于控制表格的列行为, 设置示例：

```jsx
const column = [
  { label: '日期', prop: 'date', width: 100 },
  { label: '姓名', prop: 'name' },
  { label: '邮编', prop: 'zip' },
  {
    label: '地址',
    prop: 'address',
    render: (h, scope) => {
      return (<el-tag>{scope.row.address}<el-tag>)
    }
  },
  {
    label: '组件',
    prop: 'cmp',
    component: EditBtn,
    listeners: {
      'row-edit'(row) {
        console.log('row-edit', row)
      }
    }
  }
]
```

**columns-props 配置**
columns-props 用于配置 columns 各列默认的 props 属性，

```js
const columnsProps = {
  align: 'left',
  minWidth: 120
}
```

**pagination 配置**
pagination 用于控制显示分页组件, pagination 分页组件是继承 el-pagination 的二次封装，来源开源项目中的[vue-element-admin
组件库中分页组件](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/components/Pagination/index.vue)

| 参数          | 说明                                  | 类型       | 默认值           |
| ------------- | ------------------------------------- | ---------- | ---------------- |
| `total`       | 总条目数                              | `Number`   | /                |
| `page`        | 当前页数 支持 `.sync` 修饰符          | `Number`   | 1                |
| `limit`       | 每页显示条目个数，支持 `.sync` 修饰符 | `Number`   | 20               |
| `page-sizes`  | 每页显示个数选择器的选项设置          | `Number[]` | [10, 20, 30, 50] |
| `hidden`      | 是否隐藏                              | `Boolean`  | `false`          |
| `auto-scroll` | 分页之后是否自动滚动到顶部            | `Boolean`  | `true`           |

其它 Element 的 el-pagination 支持的属性，它也都支持。详情见[文档](https://element.eleme.io/#/zh-CN/component/pagination)

**示例**

```js
<template>
  <bi-table border stripe :data="data" :column="column"></bi-table>
</template>

<script>
import BiTable from '@/components/BiTable'

export default {
  components: {
    BiTable
  },
  data() {
    return {
      column: [
        { label: '日期', prop: 'date' },
        { label: '姓名', prop: 'name' },
        { label: '省份', prop: 'province' },
        { label: '市区', prop: 'city' },
        { label: '地址', prop: 'address' }
      ],
      data: [
        {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ]
    }
  }
}
</script>
```

### 构建命令

```bash
# 安装依赖包
npm install

# 启动开发环境
npm run serve

# 构建生产环境
npm run build

# 启动unit测试
npm run test:unit

# 启动unit end-to-end 测试
npm run test:e2e

# 检查修复代码
npm run lint
```

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