is a efficient table
npm install eff-tablehtml
`
`js
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' }
]
}
}
}
}
`
$3
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ---------------------- | ------------------------- | ------------| -------------- | ------ |
| value | columns数组 | array | | [] |
| data | table 数据 | array | | [] |
| form | 搜索数据 | Object | | {} |
| rowId | 行主键 | String | | _rowId |
| height | Table 的高度 | number | | - |
| max-height | Table 最大高度 | number | | - |
| row-height | 行高度 | number | | 36 |
| border | 是否带有纵向边框 | boolean | | false |
| show-header | 是否显示表头 | Boolean | | true |
| header-contextmenu | 是否开启表头右键扩展菜单 | Boolean | | false |
| empty-text | 空数据时显示的文本内容 | String | | 暂无数据 |
| highlight-current-row| 是否要高亮当前行 | boolean | | false |
| row-class-name| 行的 className | Function({row, rowIndex})/String | | |
| cell-class-name| 单元格的 className | Function({row, column, rowIndex, columnIndex})/String | | |
| drag | 是否启用列拖动 | Boolean | | false |
| row-drag | 是否启用行拖动 | Boolean | | false |
| search | 是否启用搜索 | Boolean | | false |
| edit | 是否启用编辑 | Boolean | | false |
| messages | 提示消息，跟校验结果并存 | [{ prop, message, rowIndex }] | | array |
| show-summary | 是否在表尾显示合计行 | Boolean | | false |
| sum-text | 合计行第一列的文本 | String | | 总计 |
| summary-method | 自定义的合计计算方法 | Function({ columns, data }) | | |
| selectRange | 是否开启选择区域功能 | Boolean | | |
| copy | 是否开启复制功能 | Boolean | | |
| edit-history | 是否开启前进后退功能 | Boolean | | |
| replace | 替换和填充功能 | Boolean | | |
| before-insert | 增加插入数据前的钩子函数 | function(records) | | |
| column-config | 列配置 | object | | {} |
| edit-config | 编辑配置 | object | | {} |
| footerActionConfig | 页面底部配置 | {pageConfig: 分页配置，参考eleui、showPager：是否显示分页、showBorder：是否显示边框、pageInLeft：分页是否在左边} | | |
| toolbar-config | 工具栏配置 | object | | {} |
| tree-config | 表格树配置 | object | | {} |
| expand-config | 展开行配置 | object | | {} |
- columns
`js
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
`js
{
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
`js
{
editLoop: true, // 是否启用行循环编辑，在最后一个单元格跳下一个及第一个单元格跳上一个时进行跨行编辑
editStop: false, // 是否暂停编辑，当编辑组件弹窗或下拉框时出现时应设置为true，关闭时设置为false
trigger: 'click', // 编辑功能触发方式，可选 click/dblclick
}
`
- sort-config
`js
{
multiple: false, // 是否启用多字段排序
sortMethod: null, // 排序的时候使用的方法 function(a, b)
remote: false, // 服务端排序，需要监听 sort-change 事件
}
``