脚本宝典收集整理的这篇文章主要介绍了vue 可编辑表格 ElementUI 表格可编辑 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 的所有功能、参数、方法、插槽

使用

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>

脚本宝典总结

以上是脚本宝典为你收集整理的vue 可编辑表格 ElementUI 表格可编辑 elx-table、elx-editable全部内容，希望文章能够帮你解决vue 可编辑表格 ElementUI 表格可编辑 elx-table、elx-editable所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。