elt-element-ui

基于 ElementUI 的增强组件库，适用于 Vue 2.x 项目。

安装

npm install elt-element-ui element-ui

全量引入

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import EltElementUI from 'elt-element-ui'

Vue.use(ElementUI)
Vue.use(EltElementUI)

按需引入

import { 
  EltSelectTree, 
  EltSelectTable, 
  EltTable,
  EltButtonGroup,
  EltCalcInput,
  EltPercentInput,
  EltSwitch,
  EltListBox,
  EltQr,
  EltSplitter,
  EltSearchInput,
  EltWindow,
  EltToolbar,
  EltDropdownButton,
  EltRightMenu
} from 'elt-element-ui'

Vue.component('EltSelectTree', EltSelectTree)
Vue.component('EltSelectTable', EltSelectTable)
Vue.component('EltTable', EltTable)
Vue.component('EltButtonGroup', EltButtonGroup)
Vue.component('EltCalcInput', EltCalcInput)
Vue.component('EltPercentInput', EltPercentInput)
Vue.component('EltSwitch', EltSwitch)
Vue.component('EltListBox', EltListBox)
Vue.component('EltQr', EltQr)
Vue.component('EltSplitter', EltSplitter)
Vue.component('EltSearchInput', EltSearchInput)
Vue.component('EltWindow', EltWindow)
Vue.component('EltToolbar', EltToolbar)
Vue.component('EltDropdownButton', EltDropdownButton)
Vue.component('EltRightMenu', EltRightMenu)

组件文档

EltSelectTree — 下拉树选择

<elt-select-tree
  v-model="value"
  :tree-data="treeData"
  :props="{ label: 'name', children: 'children' }"
  node-key="id"
  placeholder="请选择"
  width="240px"
  clearable
  :default-expand-all="true"
/>

| Prop | 类型 | 默认值 | 说明 | |-----------------|----------------|---------|------| | v-model / value | String|Number | — | 选中节点的 nodeKey 值 | | treeData | Array | [] | 树数据 | | props | Object | { label:'label', children:'children', disabled:'disabled' } | 字段映射 | | nodeKey | String | 'id' | 节点唯一标识字段 | | placeholder | String | '请选择' | 占位文本 | | disabled | Boolean | false | 是否禁用 | | clearable | Boolean | true | 是否可清空 | | size | String | — | 尺寸 medium/small/mini | | width | String | '100%' | 组件宽度 | | defaultExpandAll| Boolean | false | 是否默认展开全部 |

| Event | 说明 | |---------------|------| | change(value) | 选中节点变化 | | node-click(nodeData, node) | 节点点击 | | clear | 清空 | | visible-change(visible) | 下拉展开/收起 |

| 方法 | 说明 | |----------------|------| | filterTree(keyword) | 过滤树节点（需树组件开启 filter-node-method） |

EltSelectTable — 下拉表格选择

<elt-select-table
  v-model="selectedId"
  :table-data="list"
  :columns="columns"
  row-key="id"
  label-key="name"
  width="400px"
  :table-height="220"
>
  <!-- 搜索插槽 -->
  <template #search>
    <el-input v-model="keyword" placeholder="搜索..." />
  </template>
  <!-- 分页插槽 -->
  <template #pagination>
    <el-pagination ... />
  </template>
  <!-- 自定义列内容（对应 columns 中 slot: 'mySlot'） -->
  <template #mySlot="{ row }">
    <el-tag>{{ row.status }}</el-tag>
  </template>
</elt-select-table>

| Prop | 类型 | 默认值 | 说明 | |-------------|----------------|---------|------| | v-model / value | any | null | 选中行的 rowKey 值 | | tableData | Array | [] | 表格数据 | | columns | Array | [] | 列配置（见下） | | rowKey | String | 'id' | 行唯一标识字段 | | labelKey | String | 'name' | 选中后显示在 Select 中的字段 | | placeholder | String | '请选择' | 占位文本 | | disabled | Boolean | false | — | | clearable | Boolean | true | — | | size | String | — | — | | tableSize | String | — | 表格尺寸（独立） | | width | String | '100%' | Select 宽度 | | tableWidth | String | '100%' | 表格宽度 | | tableHeight | String|Number | 240 | 表格固定高度 | | stripe | Boolean | true | 斑马纹 | | border | Boolean | true | 边框 | | tableAttrs | Object | {} | 透传给 el-table 的额外属性 |

columns 字段：

[
  { prop: 'id', label: 'ID', width: 60 },
  { prop: 'name', label: '姓名', minWidth: 100 },
  { prop: 'status', label: '状态', slot: 'statusSlot' }  // 自定义列内容
]

| Slot | 说明 | |------------|------| | search | 搜索区域，提供 refresh 方法 | | pagination | 分页区域 | | [col.slot] | 自定义列内容，scope 为 { row, column, $index } |

| Event | 说明 | |----------------|------| | change(value, row) | 选中变化，row 为完整行数据 | | clear | 清空 | | row-click(row) | 行点击 | | refresh | 搜索/分页刷新通知 |

EltTable — 动态列 + 分页 + 合计

<elt-table
  :table-data="list"
  :columns="columns"
  :is-pagination="true"
  :current-page.sync="page"
  :page-size.sync="size"
  :total="total"
  :summary-columns="summaryColumns"
  @page-change="onPageChange"
>
  <!-- 自定义列插槽 -->
  <template #action="{ row }">
    <el-button @click="edit(row)">编辑</el-button>
  </template>
</elt-table>

columns 列配置：

columns: [
  { type: 'selection' },                          // 选择框列
  { type: 'index', label: '#', width: 50 },       // 序号列
  { prop: 'name', label: '姓名', width: 120, fixed: 'left' },
  { prop: 'dept', label: '部门', minWidth: 100 },
  { prop: 'salary', label: '薪资', width: 120, align: 'right',
    formatter: (row) => `¥${row.salary}` },
  { prop: 'status', label: '状态', slot: 'statusSlot' },  // 自定义插槽
  { prop: 'action', label: '操作', slot: 'action', fixed: 'right', width: 150 },
  { label: '地址信息', children: [               // 多级表头
    { prop: 'province', label: '省份' },
    { prop: 'city', label: '城市' }
  ]},
  { prop: 'email', label: '邮箱', hidden: true }  // hidden 隐藏列
]

summaryColumns 合计列配置：

summaryColumns: [
  'salary',   // 字符串形式：直接求和
  { prop: 'amount', formatter: (sum, values, column) => `¥${sum.toLocaleString()}` }
]

| Prop | 类型 | 默认值 | 说明 | |--------------------|----------------|---------|------| | tableData | Array | [] | 数据 | | columns | Array | [] | 列配置 | | loading | Boolean | false | 加载状态 | | height | String|Number | — | 固定高度 | | maxHeight | String|Number | — | 最大高度 | | stripe | Boolean | false | 斑马纹 | | border | Boolean | true | 边框 | | size | String | — | 尺寸 | | rowKey | String | 'id' | 行唯一标识 | | emptyText | String | '暂无数据' | — | | isPagination | Boolean | true| 是否显示分页 | | currentPage | Number | 1 | 当前页（支持 .sync） | | pageSize | Number | 20 | 每页条数（支持 .sync） | | total | Number | 0 | 总条数 | | pageSizes | Array | [10,20,50,100] | 每页条数选项 | | paginationLayout | String | 'total, sizes, prev, pager, next, jumper' | 分页布局 | | paginationBackground| Boolean | true | 分页按钮背景 | | summaryColumns | Array | [] | 合计列（字符串/对象） | | sumText | String | '合计' | 合计首列文字 | | summaryMethod | Function | — | 完全自定义合计方法（优先级最高） | | spanMethod | Function | — | 合并行列方法 |

| Event | 说明 | |--------------|------| | page-change({ currentPage, pageSize }) | 分页变化 | | update:currentPage | 当前页 .sync | | update:pageSize | 每页条数 .sync | | selection-change, sort-change, row-click 等 | 透传 el-table 事件 |

EltButtonGroup — 下拉按钮组

<elt-button-group label="操作" size="small" type="primary">
  <el-button size="small" icon="el-icon-plus" @click="handleAdd">新增</el-button>
  <el-button size="small" @click="handleEdit">编辑</el-button>
  <el-button size="small" @click="handleDelete">删除</el-button>
</elt-button-group>

| Prop | 类型 | 默认值 | 说明 | |-------------|---------|---------|------| | label | String | '操作' | 主按钮显示文字 | | size | String | 'small' | 尺寸 medium/small/mini | | type | String | — | 按钮类型 primary/success/warning/danger/info/text | | hideArrow | Boolean | false | 是否隐藏下拉箭头 |

| Slot | 说明 | |-------------|------| | default | 下拉菜单按钮列表，自动接收 size 属性 |

EltCalcInput — 计算器输入框

<elt-calc-input
  v-model="value"
  placeholder="点击计算器图标进行计算"
  size="small"
/>

<!-- 禁用状态 -->
<elt-calc-input v-model="value" disabled />

| Prop | 类型 | 默认值 | 说明 | |-------------------|----------------|---------|------| | v-model / value | String|Number | '' | 绑定值 | | appendButtonSize | String | — | 附加按钮尺寸，默认跟随 size |

支持 el-input 的所有属性（disabled、size、placeholder 等）。禁用时计算器图标自动变灰且不可点击。

EltPercentInput — 百分数输入框

<elt-percent-input
  v-model="value"
  placeholder="请输入百分比"
  :min="0"
  :max="100"
/>

| Prop | 类型 | 默认值 | 说明 | |--------------|---------|--------|------| | v-model/value| Number|String | '' | 绑定值 | | max | Number | 100 | 最大值 | | min | Number | 0 | 最小值 | | allowOverflow| Boolean | false | 是否允许超出范围 |

支持 el-input 的所有属性（disabled、size、placeholder 等）

EltSwitch — 带文本开关

<!-- 布尔类型 -->
<elt-switch
  v-model="value"
  active-text="开启"
  inactive-text="关闭"
/>

<!-- 数值类型 -->
<elt-switch
  v-model="value"
  active-value="1"
  inactive-value="0"
  active-text="是"
  inactive-text="否"
/>

| Prop | 类型 | 默认值 | 说明 | |---------------|---------------------|---------|------| | v-model/value | Boolean|Number|String | false | 绑定值 | | active-text | String | '' | 开启状态显示的文本 | | inactive-text | String | '' | 关闭状态显示的文本 | | active-value | Boolean|Number|String | true | 开启时的值 | | inactive-value| Boolean|Number|String | false | 关闭时的值 | | disabled | Boolean | false | 是否禁用 |

EltListBox — 列表选择框

<!-- 单选 -->
<elt-list-box
  v-model="value"
  :data="options"
/>

<!-- 多选 -->
<elt-list-box
  v-model="values"
  :data="options"
  multiple
/>

<!-- 自定义内容 -->
<elt-list-box v-model="value" :data="options">
  <template #default="{ item, selected }">
    <span :style="{ color: selected ? '#fff' : '#606266' }">
      {{ item.label }} - {{ selected ? '已选' : '未选' }}
    </span>
  </template>
</elt-list-box>

| Prop | 类型 | 默认值 | 说明 | |---------------|----------------|---------|------| | v-model/value | String|Number|Array | — | 绑定值 | | data | Array | [] | 选项数据 | | labelKey | String | 'label' | 显示字段 | | valueKey | String | 'value' | 值字段 | | multiple | Boolean | false | 是否多选 | | disabled | Boolean | false | 是否禁用 | | emptyText | String | '暂无数据' | 空数据提示 |

| Slot | 说明 | |------------|------| | default | 自定义选项内容，scope 为 { item, selected } |

| Event | 说明 | |---------------|------| | change(value) | 选中值变化 |

EltQr — 二维码生成

<!-- 基础用法 -->
<elt-qr text="https://example.com" :size="120" />

<!-- 文本在上方 -->
<elt-qr text="Hello" text-position="top" />

<!-- 自定义颜色 -->
<elt-qr text="https://example.com" background-color="ffffff" foreground-color="409EFF" />

| Prop | 类型 | 默认值 | 说明 | |-------------------|--------|----------|------| | text | String | '' | 二维码内容 | | size | Number | 100 | 二维码尺寸（像素） | | textPosition | String | 'bottom' | 文本位置：bottom/top/left/right | | showText | Boolean | true | 是否显示文本 | | backgroundColor | String | 'ffffff' | 背景色（十六进制，不带 #） | | foregroundColor | String | '000000' | 前景色（十六进制，不带 #） | | border | Boolean | true | 是否显示边框 | | borderWidth | Number | 1 | 边框宽度（px） | | borderColor | String | '#DCDFE6' | 边框颜色 | | padding | Number | 8 | 二维码内边距（px） |

EltSplitter — 分割面板

<!-- 水平分割（左右） -->
<elt-splitter style="height: 300px;">
  <template #left>
    <div>左侧面板内容</div>
  </template>
  <template #right>
    <div>右侧面板内容</div>
  </template>
</elt-splitter>

<!-- 垂直分割（上下） -->
<elt-splitter direction="vertical" style="height: 300px;">
  <template #top>
    <div>顶部面板内容</div>
  </template>
  <template #bottom>
    <div>底部面板内容</div>
  </template>
</elt-splitter>

| Prop | 类型 | 默认值 | 说明 | |-------------------|-----------------|----------|------| | direction | String | 'horizontal' | 分割方向：horizontal/vertical | | firstSize | String|Number | '50%' | 第一个面板尺寸 | | minSize | String|Number | 100 | 最小尺寸限制 | | maxSize | String|Number | '100%' | 最大尺寸限制 | | disabled | Boolean | false | 是否禁用 |

| Slot | 说明 | |-------------------|------| | left / top | 第一个面板内容（horizontal 用 left，vertical 用 top） | | right / bottom | 第二个面板内容（horizontal 用 right，vertical 用 bottom） |

| Event | 说明 | |---------------|------| | resize(size) | 拖动分隔条后触发，返回第一个面板的尺寸 |

EltSearchInput — 搜索输入框

<elt-search-input
  v-model="value"
  placeholder="请输入搜索内容"
  @search="handleSearch"
/>

| Prop | 类型 | 默认值 | 说明 | |-------------------|--------|--------|------| | v-model / value | String | '' | 绑定值 | | appendButtonSize | String | — | 附加按钮尺寸 |

支持 el-input 的所有属性（disabled、size、placeholder 等）

| Event | 说明 | |---------------|------| | search(value) | 回车或点击搜索图标时触发 |

EltWindow — 窗口弹窗

<elt-window
  v-model="visible"
  title="操作确认"
  width="400px"
  @confirm="handleConfirm"
  @cancel="handleCancel"
>
  <p>确定要执行此操作吗？</p>
</elt-window>

| Prop | 类型 | 默认值 | 说明 | |-------------------|---------|------------|------| | v-model / visible | Boolean | false | 是否显示 | | title | String | '提示' | 标题文字 | | titleIcon | String | '' | 标题图标 | | width | String | '50%' | 弹窗宽度 | | modal | Boolean | true | 是否显示遮罩层 | | closable | Boolean | true | 是否显示关闭按钮 | | minable | Boolean | false | 是否显示最小化按钮 | | showFooter | Boolean | true | 是否显示底部按钮区域 | | showConfirmButton | Boolean | true | 是否显示确定按钮 | | showCancelButton | Boolean | true | 是否显示取消按钮 | | confirmText | String | '确定' | 确定按钮文字 | | cancelText | String | '取消' | 取消按钮文字 | | confirmButtonType | String | 'primary' | 确定按钮类型 | | confirmLoading | Boolean | false | 确定按钮加载状态 |

支持 el-dialog 的所有属性

| Event | 说明 | |--------------|------| | confirm | 点击确定按钮时触发 | | cancel | 点击取消/关闭按钮时触发 | | close | 弹窗关闭时触发 | | minimize | 点击最小化按钮时触发 |

| Slot | 说明 | |--------------|------| | default | 弹窗内容区域 | | footer | 自定义底部按钮区域 |

EltToolbar — 工具栏

<elt-toolbar>
  <el-button size="small">新增</el-button>
  <el-button size="small">编辑</el-button>
  <el-button size="small" type="danger">删除</el-button>
  <el-divider direction="vertical"></el-divider>
  <el-input size="small" placeholder="搜索" style="width: 200px;"></el-input>
  <el-button size="small" type="primary">查询</el-button>
</elt-toolbar>

工具栏组件，用于放置按钮、输入框等控件。内部使用 flex 布局，项之间有 4px 间隙。

| Slot | 说明 | |--------------|------| | default | 工具栏内容区域 |

EltDropdownButton — 下拉按钮

<!-- 点击触发 -->
<elt-dropdown-button
  text="操作"
  :items="dropdownItems"
  @command="handleCommand"
/>

<!-- 悬停触发 -->
<elt-dropdown-button
  text="更多"
  trigger="hover"
  :items="dropdownItems"
  @command="handleCommand"
/>

<script>
export default {
  data() {
    return {
      dropdownItems: [
        { label: '新增', value: 'add', icon: 'el-icon-plus' },
        { label: '编辑', value: 'edit', icon: 'el-icon-edit' },
        { divider: true },
        { label: '删除', value: 'delete', icon: 'el-icon-delete', disabled: true }
      ]
    }
  },
  methods: {
    handleCommand(command) {
      console.log('点击了:', command)
    }
  }
}
</script>

| Prop | 类型 | 默认值 | 说明 | |-------------------|---------|------------|------| | text | String | '操作' | 按钮文字 | | type | String | 'default' | 按钮类型 primary/success/warning/danger/info/text | | size | String | 'small' | 按钮尺寸 medium/small/mini | | icon | String | '' | 按钮图标 | | trigger | String | 'click' | 触发方式 click/hover | | disabled | Boolean | false | 是否禁用 | | hideArrow | Boolean | false | 是否隐藏箭头 | | dropdownMinWidth | String | '120px' | 下拉菜单最小宽度 | | items | Array | [] | 菜单项配置 |

菜单项配置：

{
  label: '显示文字',      // 必填
  value: 'add',          // 选填，返回值
  icon: 'el-icon-plus',  // 选填，图标
  divider: true,         // 选填，设置为 true 显示分割线（其余字段忽略）
  disabled: true         // 选填，是否禁用
}

| Event | 说明 | |--------------|------| | command | 点击菜单项时触发，参数为 item.value 或 item.label | | click | 点击触发按钮时触发 |

EltRightMenu — 右键菜单

<div @contextmenu.prevent="$refs.menu.show($event)">
  在此区域右键点击
</div>

<elt-right-menu
  ref="menu"
  :items="menuItems"
  @command="handleCommand"
/>

<script>
export default {
  data() {
    return {
      menuItems: [
        { label: '新增', value: 'add', icon: 'el-icon-plus' },
        { label: '编辑', value: 'edit', icon: 'el-icon-edit' },
        { divider: true },
        { label: '复制', value: 'copy', icon: 'el-icon-document-copy', shortcut: 'Ctrl+C' },
        { label: '粘贴', value: 'paste', icon: 'el-icon-document', shortcut: 'Ctrl+V', disabled: true },
        { divider: true },
        {
          label: '导出',
          value: 'export',
          icon: 'el-icon-download',
          children: [
            { label: '导出 Excel', value: 'export-excel' },
            { label: '导出 PDF', value: 'export-pdf' }
          ]
        }
      ]
    }
  },
  methods: {
    handleCommand(value, item, parentItem) {
      console.log('点击了:', value)
    }
  }
}
</script>

| Prop | 类型 | 默认值 | 说明 | |-----------|--------|----------|------| | items | Array | [] | 菜单项配置 | | minWidth | String | '150px' | 菜单最小宽度 | | zIndex | Number | 9999 | 层级 |

菜单项配置：

{
  label: '显示文字',           // 必填（分割线和分组标题除外）
  value: 'myValue',           // 选填，command 事件返回值，默认取 label
  icon: 'el-icon-edit',       // 选填，图标
  shortcut: 'Ctrl+S',        // 选填，快捷键提示文字
  disabled: true,             // 选填，是否禁用
  divider: true,              // 选填，渲染为分割线（其余字段忽略）
  type: 'group',              // 选填，渲染为分组标题
  children: [...],            // 选填，子菜单项（鼠标悬停展开）
}

| 方法 | 说明 | |-----------------|------| | show(event) | 在鼠标位置显示菜单，传入 MouseEvent | | hide() | 隐藏菜单 |

| Event | 说明 | |--------------------------------|------| | command(value, item, parentItem) | 点击菜单项时触发；value 为 item.value 或 item.label，parentItem 为父级菜单项（子菜单时） | | click(item, parentItem) | 同上，参数为完整 item 对象 |

菜单会在点击外部、滚动页面或按 Esc 时自动关闭。菜单超出视口边界时自动调整位置。

本地开发

# 安装依赖
npm install

# 启动示例页面
npm run dev

# 打包组件库
npm run build

发布到 npm

# 确保已登录 npm
npm login

# 发布
npm publish

License

MIT