el-validate-table
基于 element-ui 封装的可编辑,可校验,可合并的表格
yarn add el-validate-table
目录
介绍
概要
el-validate-table
是基于element-ui封装的表格组件,采用 vue 中的 render 函数写法,支持高度的可扩展性,可复用性,通过 JSON 配置即可实现,表格中的单元格编辑校验,多级表头,单元格合并。
背景
基于 2019-4 月初某项目背景,项目中含有大量的多级表头,单元格编辑,以及少许的拖拽表格。项目初期,tempalte 中存在大量的结构代码,难以迭代,难以维护,基于此背景,为了节省时间,减少重复冗余的代码,让开发者专注业务逻辑。
特点
- 只需进行简单的配置,即可实现单元格编辑(可校验),多级表头,单元格合并等复杂功能
- 支持 ElTable, ElTableColumn 的所有的接口
- 支持单元格自定义校验
- 单元格支持自定义组件渲染
- 体验良好的校验交互
示例
1.基本用法
<template> <div class="validate-table-test"> <el-validate-table :columns="columns" :data="data"></el-validate-table> </div></template><script>export default { name: 'validate-table-test', data() { return { data: [ { merge: 'DC123', date: '2014-10-21', name: '尼莫', sex: '男', old: 23, a: '1', b: '耒阳' }, { merge: 'DC123', date: '2014-10-21', name: '安娜', sex: '女', old: 22, a: '2', b: '广州' } ], columns: [ { prop: 'merge', label: '合并测试', isMerge: true }, { prop: 'date', label: '日期', isMerge: true }, { prop: 'name', label: '姓名' }, { prop: 'sex', label: '性别' }, { prop: 'test', label: '省市区域', children: [ { prop: 'a', label: '省', config: params => ({ type: 'el-select', rules: [ { required: true, message: '不能为空', trigger: 'change' } ], options: [ { value: '', label: '全部' }, { value: '1', label: '湖南' }, { value: '2', label: '广东' } ] }) }, { prop: 'b', label: '市' } ] }, { prop: 'old', label: '年龄', config: params => { const {rowIndex} = params if (rowIndex == 0) { return { type: 'el-input', rules: [ { required: true, message: '年龄不能为空', trigger: 'blur' }, { pattern: /^[1-9]\d*$/, message: '只能填写正整数', trigger: 'blur' } ] } } } } ] } }}</script>
参数说明
- 外部参数说明
参数 | 说明 | 类型 |
---|---|---|
data | 匹配的数据,与 element-ui,el-table 用法相同 | Array |
columns | 列配置,支持 el-table-column 所有的配置项,格外扩展 config | Array |
isDrag | 是否支持表格行拖拽 | Boolean |
- columns 参数说明
参数 | 说明 | 类型 |
---|---|---|
prop | 绑定的列字段 | string |
label | 列标题显示 | string |
children | 子级表头配置 | array |
render(h,params) | 自定义渲染元素 | function |
component | 自定义组件 | vnode |
- config(rowIndex,row,columnIndex,prop,column) 配置说明
参数 | 说明 | 类型 |
---|---|---|
type | 渲染的元素tag or 组件的name | stirng |
rules | 对表单元素的校验 | array |
event | 事件 | object |
style | 样式 | object |
attrs | 外部参数 | object |