vue-element-extends v1.2.29

vue-element-extends（已废弃，不再维护）

基于 Vue 2.6.x 、ElementUI 2.x 的扩展组件

---

Attention! This component is no longer recommended!
非常抱歉！该组件不再继续维护了
有需要可以了解下这个表格：🐬vxe-table

---

• elx-table 功能点：

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

• elx-editable 功能点：

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

Docs

存在问题： 树表格只能支持小部分功能，编辑情况下会存在问题

😱注：正常渲染不适用于一页显示海量数据（建议使用分页）；启用滚动渲染可以支撑海量数据（缺点是滚动效果略差）

https://xuliangzhan.github.io/vue-element-extends/

Virtual Scroll

存在问题：

• 多选列无法全选
• 不支持树形结构
• 不支持排序
• 不支持筛选

Installing

npm install xe-utils vue-element-extends

在 unpkg 和 cdnjs 上获取

<!-- 引入样式 -->
<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">
<!-- 引入脚本 -->
<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)

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 校验规则配置：

edit-config 编辑参数配置：

context-menu-config 表格右键菜单配置（如果是自定义 code 可以配合 custom-menu-link 事件使用）：

内置的菜单 code 列表：

custom-columns 自定义列的配置：

Editable Events

Editable Methods

exportCsv options 的配置：

Editable-Column Attributes

<elx-editable-column
  prop="name"
  label="Name"
  :edit-render="{name: 'ElInput'}"></elx-editable-column>

edit-render 渲染参数配置

Editable-Column Scoped Slot

Example

Run demo on jsfiddle.net or runjs

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

License

MIT License, 2017-present, Xu Liangzhan