vue-element-extends

vue-element-extends

基于 Vue 2.6.x 、ElementUI 2.x 的扩展组件

Vue 表格最终解决方案，最新版见 🐬vxe-table

• elx-table 功能点：

  • 支持自定义显示、隐藏列
  • 支持滚动渲染、海量数据
  • 支持导出 .csv 文件
  • 支持原 ElTable 的所有功能、参数、方法、插槽

• elx-editable 功能点：

  • 支持只读、单元格编辑、整行编辑
  • 支持手动、单击、双击编辑模式
  • 支持渲染简化的 ElementUI 组件
  • 支持自定义渲染任意 Vue 组件
  • 支持动态列渲染
  • 支持（同步、异步）校验
  • 支持显示单元格值的修改状态
  • 支持增/删/改/查/还原
  • 支持方向键和 Tab 键切换单元格
  • 支持表格右键菜单
  • 支持自定义显示、隐藏列
  • 支持滚动渲染、海量数据
  • 支持导出 .csv 文件
  • 支持原 ElTable 的所有功能、参数、方法、插槽

Docs

存在问题： 树表格只能支持小部分功能，编辑情况下可能会存在问题

😱注：正常渲染不适用于一页显示海量数据（建议使用分页）；启用滚动渲染可以支撑海量数据（缺点是滚动效果略差）
如果有更好优化建议或遇到问题欢迎提 Issues

https://xuliangzhan.github.io/vue-element-extends/

Scroll render

  top --> Space  
    --> visibleStart  
      --> renderSize  
        --> offsetSize  
  table --> visibleIndex  
        --> offsetSize  
  bottom --> Space  

存在问题：

• 多选列无法全选
• 不支持树形结构
• 不支持排序
• 不支持筛选

Installing

npm install xe-utils vue-element-extends

在 unpkg 和 cdnjs 上获取

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="https://unpkg.com/vue-element-extends/lib/index.css">
<!-- 引入脚本 -->
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vue-element-extends"></script>

Case 1:

import Vue from 'vue'
import {
  Table,
  TableColumn,
  Editable,
  EditableColumn
} from 'vue-element-extends'
import 'vue-element-extends/lib/index.css'

Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Editable)
Vue.use(EditableColumn)

Case 2:

import Vue from 'vue'
import VueElementExtends from 'vue-element-extends'
import 'vue-element-extends/lib/index.css'

Vue.use(VueElementExtends)

API

Editable Attributes

<elx-editable
  ref="editable"
  :edit-config="{trigger: 'click', mode: 'cell'}"
  :edit-rules="{name: [{required: true, message: 'Please enter a name.', trigger: 'blur'}]}">
  <elx-editable-column
    prop="name"
    label="Name"
    :edit-render="{name: 'ElInput'}"></elx-editable-column>
  <elx-editable-column
    prop="age"
    label="Age"
    :edit-render="{name: 'ElInputNumber'}"></elx-editable-column>
</elx-editable>

edit-rules 校验规则配置：

属性	描述	类型	可选值	默认值
required	是否必填	Boolean	—	—
min	校验值最小长度（如果 type=number 则比较值大小）	Number	—	—
max	校验值最大长度（如果 type=number 则比较值大小）	Number	—	—
type	类型校验	String	number / string	string
pattern	正则校验	RegExp	—	—
validator	自定义校验方法	Function(rule, value, callback)	—	—
trigger	触发校验方式	String	blur / change	blur

edit-config 编辑参数配置：

属性	描述	类型	可选值	默认值
trigger	触发方式	String	manual（手动触发方式，只能用于 mode=row） / click（点击触发编辑） / dblclick（双击触发编辑）	click
mode	编辑模式	String	cell（单元格编辑模式） / row（行编辑模式）	cell
render	渲染方式，可以设置为 scroll 启用滚动渲染，支持海量数据	String	default / scroll	—
renderSize	只对 render=scroll 有效，配置一次渲染的条数	Number	—	—
props	配置节点对应属性值	Object	—	{children: 'children'}
showIcon	是否显示列头编辑图标	Boolean	—	true
showStatus	是否显示单元格值的修改状态	Boolean	—	true
activeMethod	只对 type=default 的列有效，该函数 Function({row, rowIndex, column?, columnIndex?}) 的返回值用来决定这一行或列是否允许编辑	Function	—	—
autoClearActive	当点击其它地方后，是否自动清除最后激活的行或单元格	Boolean	—	true
clearActiveMethod	该函数 Function({type, row, rowIndex, column?, columnIndex?}, event) 的返回值用来决定是否允许清除当前激活的行或单元格	Function	—	—
useDefaultValidTip	如果同时使用了数据校验和 fixed 列，请设置为 true 使用默认提示	Boolean	—	true
validTooltip	只对 useDefaultValidTip=false 有效，设置校验 tooltip 提示消息的参数	Object	—	{ offset: 10, placement: 'bottom-start' }
disabledValidTip	关闭校验提示	Boolean	—	false
autoScrollIntoView	当单元格被激活时，自动将单元格滚动到可视区域内	Boolean	—	false
isTabKey	只对 trigger!=manual 有效，是否启用 Tab 键切换到下一个单元格	Boolean	—	false
tabToActive	只对 isTabKey=true 有效，是否在 Tab 键切换后直接激活为编辑状态	Boolean	—	false
isArrowKey	只对 trigger!=manual 有效，是否启用箭头键切换行和单元格	Boolean	—	false
isDelKey	只对 trigger!=manual 有效，是否启用删除键清空单元格内容	Boolean	—	false
isCheckedEdit	只对 trigger!=manual 有效，是否启用选中状态允许值覆盖式编辑	Boolean	—	false
checkedEditMethod	只对 isCheckedEdit=true 有效，可以通过重写该函数 Function({row, rowIndex, column, columnIndex, cell}, event) 返回 false 来阻止默认值的覆盖行为	Function	—	—
keydownMethod	键按下时调用该函数 Function({active, checked}, event)	Function	—	—

context-menu-config 表格右键菜单配置（如果是自定义 code 可以配合 custom-menu-link 事件使用）：

属性	描述	类型	参数
disabledHeader	是否禁用表格头部右键	Boolean	—
headerMenus	表格头部菜单配置	Array	{ code, name, prefixIcon, suffixIcon, visible, disabled }
disabledBody	是否禁用表格内容右键	Boolean	—
bodyMenus	表格内容菜单配置	Array	{ code, name, prefixIcon, suffixIcon, visible, disabled }
headerVisibleMethod	该函数 Function({row, rowIndex, column, columnIndex, cell}, event) 的返回值用来决定是否显示头部右键菜单	Function	—
bodyVisibleMethod	该函数 Function({row, rowIndex, column, columnIndex, cell}, event) 的返回值用来决定是否显示内容右键菜单	Function	—

内置的菜单 code 列表：

编码	描述
CELL_RESET	清除单元格数据的值
CELL_REVERT	还原单元格数据
SELECT_REMOVE	删除选中的行
SELECT_RESET	清除选中的数据的值
SELECT_REVERT	还原选中的数据
SELECT_EXPORT	导出选中的数据
ROW_INSERT	在当前位置插入新行
ROW_INSERT_ACTIVE	在当前位置插入新行并激活编辑状态
ROW_REMOVE	删除当前行
ROW_RESET	清除当前行数据的值
ROW_REVERT	还原当前行数据
ROW_EXPORT	导出当前行数据
ALL_REMOVE	删除表格所有行
ALL_RESET	清除表格所有数据的值
ALL_REVERT	还原表格所有数据
ALL_EXPORT	导出表格所有数据
ALL_COLUMN_VISIBLE	显示所有列
COLUMN_HIDDEN	隐藏列

custom-columns 自定义列的配置：

属性	描述	类型	可选值	默认值
prop	对应列内容的字段名	String	—	—
visible	默认是否显示	Boolean	—	true

Editable Events

事件名	说明	参数
valid-error	校验不通过时会触发该事件	rule,row,column,cell
edit-disabled	当点击后行或单元格如果是禁用状态时会触发该事件	row[,column,cell]?,event
edit-active	当点击后改变为编辑状态之后会触发该事件	row[,column,cell]?,event
clear-active	只对 autoClearActive=true 有效，当点击其它地方后，自动清除最后活动行或列之后会触发该事件	row[,column,cell]?,event
blur-active	当行或者单元格失焦之后会触发该事件	row[,column,cell]?,event
custom-menu-link	自定义的菜单点击后触发该函数	code,row,column,cell,event

Editable Methods

方法名	描述	参数
refresh	手动刷新表格，对于非双向同步的树形结构可能会用到
reload	初始化完整表格数据，更新为初始状态	datas
reloadRow	初始化指定行数据，更新为初始状态	row, record?
revert	还原更改，还原指定行 row 或者整个表格的数据	row?rows?,prop?
insert	从第一行新增一行新数据	record
insertAt	第二个参数 record 从指定位置新增一条数据； null 从第一行新增一行新数据；-1 从最后新增一条数据	data,record
remove	数据删除，指定 row 或 [row, ...] 删除多条数据	row?rows?
(v1.2+废弃) removes	根据多条数据删除	rows
removeSelecteds	删除选中行数据	—
clear	清空表格，删除表格所有行	—
reset	重置数据，清除指定行 row 或者 [row, ...] 或者整个表格的值	row?rows?
clearActive	清除所有已激活的行或单元格为不可编辑状态	—
hasActiveRow	判断当前是否已激活为编辑状态的行	row
getActiveRow	获取当前已激活为编辑行或单元格的信息	—
setActiveRow	只对 mode=row 有效，激活指定行为可编辑状态	row
setActiveCell	激活指定某一行的某个单元格为可编辑状态	row,prop?
setChecked	只对 target!==manual 有效，指定单元格为选中状态	row,prop
hasRowInsert	检查是否为新增的行数据	row
hasRowChange	检查行或列数据是否发生改变	row, prop?
updateStatus	更新单元格编辑状态（只对 showStatus=true 并且使用自定义渲染时，当值发生改变时才需要调用）	scope
getAllRecords	获取表格数据集合	—
getRecords	获取表格数据，也可以指定索引获取某条数据	index
getInsertRecords	获取新增数据	—
getRemoveRecords	获取已删除数据	—
getUpdateRecords	获取已修改数据	—
checkValid	检测是否有校验不通过的列信息	—
validateRow	对表格某一行进行校验的方法，参数为行数据和一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：（是否校验成功，最近一列未通过校验的字段）。若不传入回调函数，则会返回一个 promise	row,callback
validate	对整个表格进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：（是否校验成功，最近一列未通过校验的字段）。若不传入回调函数，则会返回一个 promise	callback
exportCsv	将表格数据导出为 .csv 文件，说明：支持IE9+、Edge、Chrome、Firefox 等常用浏览器。IE11以下可能存在中文乱码问题，部分浏览器需要手动修改后缀名为 .csv	options

exportCsv options 的配置：

属性	描述	类型	可选值	默认值
filename	文件名	String	—	table.csv
original	是否导出源数据	Boolean	—	false
isHeader	是否显示表头	Boolean	—	false
download	是否马上下载，如果设置为 false 则通过返回结果为内容的 Promise	Boolean	—	true
data	自定义数据	Array	—	—
columns	自定义列	Array	—	—
columnFilterMethod	列过滤方法，该函数 Function(row,index,list) 的返回值用来决定该列是否导出	Function	—	—
dataFilterMethod	数据过滤方法，该函数 Function(row,index,list) 的返回值用来决定该数据是否导出	Function	—	—

Editable-Column Attributes

<elx-editable-column
  prop="name"
  label="Name"
  :edit-render="{name: 'ElInput'}"></elx-editable-column>

edit-render 渲染参数配置

属性	描述	类型	可选值	默认值
name	渲染内置的组件名称	String	ElAutocomplete / ElInput / ElSelect / ElCascader / ElTimeSelect / ElTimePicker / ElDatePicker / ElInputNumber / ElSwitch / ElRate / ElColorPicker / ElSlider	ElInput
type	渲染类型	String	default（组件触发后可视） / visible（组件一直可视）	default
autofocus	该单元格在激活后自动获取焦点（如果是渲染自定义组件，需要指定 class=elx-custom_input 才会自动获得焦点）	Boolean	—	—
（v1.2.13+废弃，保留兼容）attrs	改为使用 props	Object	—	{}
props	渲染组件附加属性，参数请查看被渲染的 Component props	Object	—	{}
events	渲染组件附加事件，参数为 ( { rule, row, column, $index }, ...Component arguments )	Object	—	{}
options	只对 name=ElSelect 有效，下拉组件选项列表	Array	—	[]
optionProps	只对 name=ElSelect 有效，下拉组件选项属性参数配置	Object	—	{ value: 'value', label: 'label' }
optionGroups	只对 name=ElSelect 有效，下拉组件分组选项列表	Array	—	[]
optionGroupProps	只对 name=ElSelect 有效，下拉组件分组选项属性参数配置	Object	—	{ options: 'options', label: 'label' }

Editable-Column Scoped Slot

name	说明
—	自定义渲染显示内容，参数为 { row, column, $index, $render }
edit	自定义渲染组件，参数为 { row, column, $index, $render }
header	自定义表头的内容，参数为 { column, $index, $render }
valid	自定义校验提示信息，参数为 { rule, row, column, $index, $render }

Example

Run demo on jsfiddle.net or runjs

<template>
  <div>
    <el-button @click="$refs.editable.insert()">新增</el-button>
    <el-button @click="$refs.editable.removeSelecteds()">删除选中</el-button>

    <elx-editable
      ref="editable"
      :data.sync="tableData">
      <elx-editable-column
        type="selection"
        width="55"></elx-editable-column>
      <elx-editable-column
        type="index"
        width="55"></elx-editable-column>
      <elx-editable-column
        prop="name"
        label="只读"></elx-editable-column>
      <elx-editable-column
        prop="sex"
        label="下拉"
        :edit-render="{name: 'ElSelect', options: sexList}"></elx-editable-column>
      <elx-editable-column
        prop="num"
        label="数值"
        :edit-render="{name: 'ElInputNumber'}"></elx-editable-column>
      <elx-editable-column
        prop="date"
        label="日期"
        :edit-render="{name: 'ElDatePicker', props: {type: 'date', format: 'yyyy-MM-dd'}}"></elx-editable-column>
      <elx-editable-column
        prop="flag"
        label="开关"
        :edit-render="{name: 'ElSwitch', type: 'visible'}"></elx-editable-column>
      <elx-editable-column
        prop="remark"
        label="文本"
        :edit-render="{name: 'ElInput'}"></elx-editable-column>
    </elx-editable>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        date: 1551322088449,
        name: '小徐',
        sex: '1',
        num: '26',
        flag: false,
        remark: '备注'
      }],
      sexList: [
        {
          'label': '男',
          'value': '1'
        },
        {
          'label': '女',
          'value': '0'
        }
      ]
    }
  }
}
</script>

License

Copyright (c) 2017-present, Xu Liangzhan