# et-element-ui > 基于element-ui的自定义UI组件 Latest version **1.3.82** (published 2026-01-06) · MIT license · 0 weekly downloads ## Install ```sh npm install et-element-ui pnpm add et-element-ui yarn add et-element-ui bun add et-element-ui ``` ## Health **Score 45/100 (D)** — status: stable. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. ## Facts | | | |---|---| | Version | 1.3.82 | | Published | 2026-01-06 | | First published | 2022-09-20 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >= 6.0.0 | | Dependencies | 1 | | Unpacked size | 1.1 MB | | Known vulnerabilities | 0 (+1 in 1 direct dependencies) | | Install scripts | no | | Author | sharp | | Maintainers | codexyf | | Keywords | et-element-ui | ## Links - npm: https://www.npmjs.com/package/et-element-ui - npm.io page: https://npm.io/package/et-element-ui ## Dependencies (1) - [vue](https://npm.io/package/vue.md) ^2.6.11 ## Recent versions - 1.3.82 (latest) — 2026-01-06 - 1.3.81 — 2025-12-19 - 1.3.80 — 2025-12-19 - 1.3.79 — 2025-12-19 - 1.3.78 — 2025-12-18 - 1.3.77 — 2025-12-18 - 1.3.76 — 2025-12-17 - 1.3.75 — 2025-11-21 - 1.3.74 — 2025-11-14 - 1.3.73 — 2025-11-12 - 1.3.72 — 2025-11-12 - 1.3.71 — 2025-10-28 - 1.3.70 — 2025-09-05 - 1.3.69 — 2025-09-03 - 1.3.68 — 2025-07-18 - … 116 more at https://npm.io/package/et-element-ui/versions ## README ## 使用说明 et-element-ui该组件是基于Vue和element-ui开发，该组件主要用于快速开发列表的增删查改功能，只需配置页面上显示的字段，并对各个字段加上对应的显示规则即可显示。 ## 安装 ```shell npm install et-element-ui -S npm install et-element-ui -D ``` ## 安装使用 ``` javascript import Vue from 'vue' import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css'; Vue.use(Element) import EtElementUI from 'et-element-ui' Vue.use(EtElementUI); ``` ::: ### 列表属性描述tableConfig | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | tableListName | 列表对应名称 | string | — | — | | page | 是否分页 |boolean | true/false | true | | dialogButton | dialog操作按钮控制，{ add: [通用按钮item即可]} | object | — | [] | | closeOnClickModal | 控制dialog是否点击遮罩关闭 | boolean | true/false | false | | mainDialogWidth | 主要控制dialog宽度，可通过&通用按钮item中进行不同位置 | string | — | [] | | dialogKey | dialog的ref名称 | string | 自定义 | et-dialog | | bottomBtn | 表格下方按钮控制 | object | - | - | | lazy | 是否开启树状懒加载 | boolean | true/false | false | | rowKey |筛序的数据主键 | string | — | 'id' | | buttonsList | 自定义操作按钮{type: 'info',icon: '',event: 'import',name: '导入'} | array/function | — | - | | single | 是否开启单选 | array | — | [{type: 1,key: 'page',value: 'pageNum'},{type: 1,key: 'size',value: 'pageSize'}] | ### 列表事件 | 事件名 | 说明 | 参数 | | ---- | ---- | ---- | | getList | et-table请求列表触发事件 | params(请求参数) | | onListEvent | 用于用户自定义事件，扩充接口。type为事件类型，row操作的行 | type, row | | onReqParams | 用于用户自定义参数，扩充接口。type为类型，obj为list对象，callback为回调函数用来输出自定义参数 | type, row, callback | | onSubmit | et-dialog中点击确定或自定义按钮触发 | type, row, callback | | formChange | et-table/et-form中input/select等控件触发值监听change事件 | row, item, value | ### selectList | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | key | 字段的名字，即field（filed/show.field/search.field/detail.field） | string | - | - | | value | 字段值，array：为静态值,如：[{value: 0, name/label: '禁用'},{value: 1, name/label: '启用'}] | array | — | - | ### table_column | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | field | 字段 | string | - | - | | stype | 显示信息类型,值：checkbox,opt,tag,list-tag,link,switch,image,list,mapping,select,input | string | — | - | | name | 字段名称 | string | — | - | | fixed | 字段是否固定 | string | left/right | - | | width | 字段宽度 | int | — | - | | formatter | 根据key-val获取对应的值 | string | — | - | | sort | 字段是否排序 | boolean/string | true/false/custom | false | | ispush | 提交表单时，该字段是否提交 | boolean | — | false | | align | 显示位置 | string | left/center/right | left | | hide | 是否隐藏 | boolean | — | false | | show | 用于控制增加和编辑form表单使用，详细见：table_column show add/update | object | — | - | | search | 用于控制查询条件，详细见：table_column search | object | — | - | | rules | 用于控制文本框合法校验，详细见：table_column rules | array/object | — | - | ### table_column show add/update | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | field | 如果该字段存在，则一个该字段给后台，如果没有默认以list为准 | string | - | - | | parent | field字段归属于该字段 | string | - | - | | type | 文本框类型,值：hide,text,password,text-tag,select,cascader,radio,checkboxall,file,switch,date,time-picker,date-picker,textarea,texttime,dynamic,button,span,task,key-val | string | - | - | | ou | 根据mode主键显示文本框 | int | — | - | | obj | 动态获取对应的值 | array | — | - | | isDisabled | 是否在修改时，可编辑该文本框 | boolean | — | false | | remote | 动态搜索远程服务器功能 | boolean | — | false | | findKey | 搜索的字段 | string | — | - | | paramKey | 参数内参数 | string | — | - | | value | 设置默认值 | string | — | - | | placeholder | 文本框描述 | string | — | - | ### mode_list search | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | type | 文本框类型，值：text，date，time-picker，select，time-select，datetimerange | string | - | - | | obj | 动态获取对应的值 | array | — | - | | placeholder | 文本框描述 | string | — | - | ### mode_list rules ### 方式一 (基于element-ui的方式配置) array | 参数 | 说明 | 类型 | 可选值 | 默认值 | |---------- |-------------- |---------- |-------------------------------- |-------- | | required | 是否必输 | boolean | - | false | | message | 错误提示消息 | string | — | - | | trigger | 触发校验 | array/string | blur/change | - | | min | 最小长度 | int | — | - | | max | 最大长队 | int | — | - | | validator | 自定义校验规则,function代表自定义方法 | string/function | — | - | ### mode_list rules ### 方式二 （只校验是否必填）boolean/array true/false | [] --- _Source: https://npm.io/package/et-element-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._