vue 可编辑表格 ElementUI 表格可编辑 vxe-table

原 vue-element-extends，最新版本见 vxe-table

最新版见 vxe-table

Vue + ElementUI 2.x 实现的可编辑表格组件，支持渲染任意组件、动态列，增删改查等操做；
保持 ElTable 一致的风格，弥补了 ElTable 可编辑表格功能的不足，兼容 ElTable 全部功能参数；
注：该组件再也不建议使用，后续推荐使用 vxe-table

• elx-table 功能点：

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

• elx-editable 功能点：

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

使用

npm install xe-utils vue-element-extends --save

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

Vue.component('ElxEditable', Editable)
Vue.component('ElxEditableColumn ', EditableColumn)

<template>
  <div>
    <el-button @click="$refs.editable.insert({name: 'new1'})">新增</el-button>
    <el-button @click="$refs.editable.removeSelecteds()">删除选中</el-button>
    <el-button @click="$refs.editable.clear()">清空</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="age" label="数值" :edit-render="{name: 'ElInputNumber'}"></elx-editable-column>
      <elx-editable-column prop="date" label="日期" :edit-render="{name: 'ElDatePicker', attrs: {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',
        age: '26',
        flag: false,
        remark: '备注'
      }],
      sexList: [
        {
          'label': '男',
          'value': '1'
        },
        {
          'label': '女',
          'value': '0'
        }
      ]
    }
  }
}
</script>