Wondering what’s next for npm?Check out our public roadmap! »

    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

    Install

    npm i el-validate-table

    DownloadsWeekly Downloads

    10

    Version

    1.0.8

    License

    MIT

    Unpacked Size

    241 kB

    Total Files

    11

    Last publish

    Collaborators

    • avatar