el-validate-table

1.0.8 • Public • Published

el-validate-table

基于 element-ui 封装的可编辑,可校验,可合并的表格

07月-09-2019

yarn add el-validate-table

目录

介绍

概要

el-validate-table 是基于element-ui封装的表格组件,采用 vue 中的 render 函数写法,支持高度的可扩展性,可复用性,通过 JSON 配置即可实现,表格中的单元格编辑校验,多级表头,单元格合并。

背景

基于 2019-4 月初某项目背景,项目中含有大量的多级表头,单元格编辑,以及少许的拖拽表格。项目初期,tempalte 中存在大量的结构代码,难以迭代,难以维护,基于此背景,为了节省时间,减少重复冗余的代码,让开发者专注业务逻辑。

⬆ Back to Top

特点

  • 只需进行简单的配置,即可实现单元格编辑(可校验),多级表头,单元格合并等复杂功能
  • 支持 ElTable, ElTableColumn 的所有的接口
  • 支持单元格自定义校验
  • 单元格支持自定义组件渲染
  • 体验良好的校验交互

⬆ Back to Top

示例

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>

⬆ Back to Top

参数说明

  • 外部参数说明
参数 说明 类型
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

⬆ Back to Top

Package Sidebar

Install

npm i el-validate-table

Weekly Downloads

0

Version

1.0.8

License

MIT

Unpacked Size

241 kB

Total Files

11

Last publish

Collaborators

  • nemoisme