vue-element-extends

vue-element-extends

实现基于 ElementUI 2.x 的扩展组件：Editable.vue、EditableColumn.vue

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

Installing

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

Get on unpkg and cdnjs

<!-- import CSS -->
<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">
<!-- import JavaScript -->
<script src="https://unpkg.com/xe-utils"></script>
<script src="https://unpkg.com/vue-element-extends"></script>

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

Vue.use(VueElementExtends)

Example

<template>
  <div>
    <el-button @click="$refs.editable.insert({name: 'Name'})">New</el-button>
    <el-button @click="$refs.editable.removeSelecteds()">Delete selecteds</el-button>
    <el-button @click="$refs.editable.clear()">Clear</el-button>

    <el-editable ref="editable" :data.sync="tableData">
      <el-editable-column type="selection" width="55"></el-editable-column>
      <el-editable-column prop="name" label="Readonly"></el-editable-column>
      <el-editable-column prop="select" label="Select" :edit-render="{name: 'ElSelect', options}"></el-editable-column>
      <el-editable-column prop="num" label="Number" :edit-render="{name: 'ElInputNumber'}"></el-editable-column>
      <el-editable-column prop="date" label="DatePicker" :edit-render="{name: 'ElDatePicker', attrs: {type: 'date', format: 'yyyy/MM/dd'}}"></el-editable-column>
      <el-editable-column prop="flag" label="Switch" :edit-render="{name: 'ElSwitch', type: 'visible'}"></el-editable-column>
      <el-editable-column prop="text" label="Input" :edit-render="{name: 'ElInput'}"></el-editable-column>
    </el-editable>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData: [{
        date: 1551322088449,
        name: 'Name1',
        select: '1',
        num: '26',
        flag: false,
        text: 'Content1'
      },{
        date: 1552460833946,
        name: 'Name2',
        select: '0',
        num: '28',
        flag: true,
        text: 'Content2'
      }],
      options: [
        {
          label: 'Label1',
          value: '1'
        },
        {
          label: 'Label2',
          value: '0'
        }
      ]
    }
  }
}
</script>

License

Copyright (c) 2017-present, Xu Liangzhan