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>