vue 可编辑表格，实现 ElementUI 编辑 table，增删改查 Grid，vue编辑 table，elx-table、elx-editable...

最新版本见 vue-element-extends

（可能这应该是目前最优的一种实现方式了吧） Vue + ElementUI 2.x 实现的可编辑表格组件，支持渲染任意组件、动态列，增删改查等操作； 保持 ElTable 一致的风格，弥补了 ElTable 可编辑表格功能的不足，兼容 ElTable 所有功能参数； 注：该组件适用于带分页方式加载的表格，不适用于一次性显示海量数据的表格，海量数据和强大编辑功能只能根据项目需求来决定取舍吧

• elx-table 功能点：

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

• elx-editable 功能点：

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

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