eff table

eff–table 高效表格

表单组件文档

主要功能

• 虚拟滚动(只渲染可视区域dom)

• 行列拖动(行拖动、列拖动、列展示隐藏)

• 搜索(行内搜索，节省界面空间)

• 编辑(浮层编辑，大量减少dom)

• 校验(全局校验、行校验、单元格校验、异步校验)

• 复制粘贴(excel般操作)

• 批量替换(对数据进行批量替换操作)

使用

  <eff-table v-bind=\"tableOptions\" />

export default {
  data() {
    retrun {
      tableOptions: {
        edit: true,
        border: true,
        columns: [
          {
            show: true,
            prop: \'id\',
            title: \'ID\'
          },
          {
            show: true,
            prop: \'name\',
            title: \'名字\',
            edit: true
          },
          {
            show: true,
            prop: \'sex\',
            title: \'性别\',
            edit: true
          },
          {
            show: true,
            prop: \'phone\',
            title: \'手机\',
            edit: true
          }
        ],
        data: [
          { id: 1, name: \'张三\', sex: \'男\', phone: \'13715201314\' },
          { id: 2, name: \'李四\', sex: \'女\', phone: \'13715201314\' },
          { id: 3, name: \'王五\', sex: \'男\', phone: \'13715201314\' },
          { id: 4, name: \'赵六\', sex: \'男\', phone: \'13715201314\' }
        ]
      }
    }
  }
}

Attributes

• columns

value: [
  {
    show: true,// boolean 列是否显示

    type: \'\', // string selection/radio/index

    width: 80, // number  列宽

    fixed: \'\', // string left/right 固定列

    align: \'left\', // string left/center/right  单元格对齐方式

    // 通用配置，会根据name指定的元素对单元格做渲染模式、编辑模式、搜索模式的默认处理，原则上只需要配置config就可以了
    config: {
      name: \'input\', // 指定ui元素
      options: [], // select组件需要
      format: ({row, rowIndex, column, columnIndex, prop}) => {}, // 格式化单元格内容
      defaultValue: \'\', // 新增行指定默认值，非必须
    }, 

    // table标题 (优先级 titleRender > type > title)
    title: \'\', // string
    titleRender: {}, // object/function(h, {title, column, columnIndex})
    titlePrefix: {message: \'\', icon: \'\'} //表头标题前缀
    titleSuffix: {message: \'\', icon: \'\'} //表头标题后缀

    // table单元格 (优先级 cellRender > type > prop)
    prop: \'\', // string
    cellRender: {}, // object/function(h, {row, rowIndex, column, columnIndex, prop})

    // 编辑
    editable: true, // boolean 控制是否开启编辑
    edit: { // object
      render: {}, // object/function(h, {row, rowIndex, column, columnIndex, prop}) 编辑元素render
      disabled: false, // boolean | function({row, rowIndex}){} 为true时禁用字段
    }

    // 校验规则
    rules: [
      {
        required: true, 
        message: \'\', //可选，默认为 不能为空 
      }, 
      {
        min: number, // 最小长度
        message: \'\', //可选，默认为 长度不能小于 min
      }, 
      {
        max: number, // 最大长度 
        message: \'\', //可选，默认为 长度不能大于 max
      }, 
      // min,max同时存在时 message 默认为 长度必须在 min 到 max 
      {
        pattern: reg, // 正则
        message: \'\', //可选，默认为 校验不通过
      }, 
      {
        type: \'email\', // 邮箱
        message: \'\', //可选，默认为 请输入正确的邮箱
      }, 
      {
        type: \'phone\', // 手机号
        message: \'\', //可选，默认为 请输入正确的手机号
      }, 
      {
        validator: Function // 自定义校验，支持异步
      }
    ]

    // 搜索
    search: {
      render: { name: \'input\' }, // object/function(h, { column, columnIndex }) 搜索元素
      rangeRender: { name: \'input\' }, // object/function(h, { column, columnIndex }) 范围搜索元素
      operator: false, // boolean 范围符号
      operatorDefault: \'like\', // string 默认类型
      type: \'\' // string 扩展字段
    }

    drag: true,// boolean 列是否可拖动

    sortable: false, // 列是否可排序

    selectable: true, // function({ row, rowIndex, rowid }) 返回值 === false 时checkbox不可勾选，仅对 type=selection 的列有效
  }
]

• toolbar-config

{
  buttons: [ // 操作按钮
    { name: \'button\', code: \'add\', children: \'新增\', props: { icon: \'el-icon-plus\' }}, // 数据末尾增加一行
    { name: \'button\', code: \'add_focus\', children: \'新增\', props: { icon: \'el-icon-plus\' }}, // 数据末尾增加一行并聚焦
    { name: \'button\', code: \'insert\', children: \'插入\', props: { icon: \'el-icon-plus\' }}, // 数据头部增加一行
    { name: \'button\', code: \'insert_focus\', children: \'插入\', props: { icon: \'el-icon-plus\' }}, // 数据头部增加一行并聚焦
    { name: \'button\', code: \'delete\', children: \'直接删除\', props: { icon: \'el-icon-delete\' }},
    { name: \'button\', code: \'mark_cancel\', children: \'删除/取消\', props: { icon: \'el-icon-delete\' }},
    { name: \'button\', code: \'save\', children: \'保存\', props: { icon: \'el-icon-check\' } }
  ], 
  columnControl: false, // 是否启用列控制功能
  columnBatchControl: false, // 是否启用列批量控制功能
  replace: false, // 是否启用列批量替换功能
  editHistory: false, // 是否启用历史操作控制功能
  seniorQuery: false, // 是否启用高级搜索功能
  refresh: false, // 是否启用刷新功能
  fullscreen: false, // 是否启用全屏功能
}

• edit-config

{
  editLoop: true, // 是否启用行循环编辑，在最后一个单元格跳下一个及第一个单元格跳上一个时进行跨行编辑
  editStop: false, // 是否暂停编辑，当编辑组件弹窗或下拉框时出现时应设置为true，关闭时设置为false
  trigger: \'click\', // 编辑功能触发方式，可选 click/dblclick
}

• sort-config

{
   multiple: false, // 是否启用多字段排序
   sortMethod: null, // 排序的时候使用的方法 function(a, b)
   remote: false, // 服务端排序，需要监听 sort-change 事件
}

Methods

Events

Slot

操作快捷键

更新日志

2021-5

• editStore 方法增加 editRow 对象

• 增加更新行数据的方法 updateRow

• 增加插入数据前的钩子函数 beforeInsert

• edit配置增加 disabled 动态禁用单元格编辑

2021-6

• 增加 getInsertList 方法，获取新增的数据

• 增加 getUpdateList 方法，获取更新的数据

• 增加 getPendingList 方法，获取伪删除的数据

• 增加 remove 方法，删除表格数据

• 增加 removeCheckRow 方法，删除表格已勾选数据

• 增加 getRemoveList 方法，获取表格已删除数据

• column 增加 titlePrefix 属性，表头标题前缀

• column 增加 titleSuffix 属性，表头标题后缀

• column 增加 editable 属性，控制是否开启编辑

2021-7

• 1.1.11 toolbar-config 操作功能整合

• 解决表格滚动后，离开页面，再重新激活页面会出现空白区域的问题

• 解决表格全选时会把之前的数据也选上的问题

• table增加 field-change 回调事件

• table增加 getTableData 方法获取表格数据

• 增加表头多选及多表头拖动功能

• 增加 getCheckColumns 方法获取选中的列

2021-8

1.1.51

• renderCell支持format函数

• refresh方法，重置时初始化分页数据

• 列长度变化后，剩余列重新计算宽度（已设置固定宽度的列不会重新计算）