integrate-table v1.0.24

integrated-table

一个基于 elementui的集成表格组件，支持分页，搜索栏JSON配置，表格JSON配置，自动根据页面固定表头

• 设计理念
  • 统一后台表格样式
  • 简化代码，一套配置解决
• 计划

功能点

• JSON表格
• JSON搜索栏
• 集成表格
• 表格策略配置
• 搜索栏支持组件
• input
• select
• date
• dateRange

安装

npm install integrated-table

文档

全局引入

import IntegratedTable from '@futu/integrated-table'
Vue.use(IntegratedTable)

自定义策略

集成表格提供了一套策略配置，表格默认策略有时间戳，可通过设定表格属性type为timestamp设置， 同时，表格也可以增加自定义策略，减少表格转化成本。

Vue.use(IntegratedTable, {
  strategy: {
    staff: () => {
      return 33
    }
  }
})

和表格一样，搜索栏提供全局配置和单组件配置，全局配置作用于所有的搜索栏控件，单组件配置作用于搜索栏单个 类别组件的配置。

Vue.use(IntegratedTable, {
  searchBarProps: {
    global: { // 全局配置
      clearable: true
    },
    dateRange: { // 单个类别组件配置
      pickerOptions: dateRangePickerOptions
    }
  }
})

组件使用

<template>
  <integrated-table
    :options="options"
    size="mini"
    request-url="http://localhost:8090/table"
    :hooks="hooks"
  >
    <template slot="btn-group">
      <el-button size="small" type="primary">新增</el-button>
    </template>
  </integrated-table>
</template>
<script>
export default {
  name: 'IntegratedTable',
  data() {
    return {
      options: {
        search: {
          base: [
            {
              name: 'name',
              type: 'input'
            },
            {
              name: ['date_start', 'date_end'], // 日期范围传两个属性
              type: 'dateRange'
            },
            {
              name: 'sex',
              type: 'select',
              options: [ // 也可以传对象，默认{ key: value }形式，可自定义 labelKey
                { label: '男', value: 1 },
                { label: '女', value: 2 }
              ],
              optionProp: { labelKey: 'label', valueKey: 'value' } // 默认映射，如果是这个映射可以不用写
            }
          ],
          more: [ // 如果不配置more将只展示基础筛选
            {
              name: 'age',
              type: 'input',
              associations: [
                {
                  watch: 'form.age',
                  func(form, property, properties) {
                    console.log(form)
                  }
                }
              ]
            } 
          ]
        },
        columns: [
          {
            label: '姓名',
            prop: 'name'
          },
          {
            label: '创建时间',
            prop: 'created_at',
            type: 'timestamp'
          },
          {
            label: '年龄',
            prop: 'age',
            render: function(scope) {
              return <span>24</span>
            }
          }
        ]
      }
    }
  }
}
</script>

搜索栏属性配置

表格组件props配置

表格属性配置

自定义搜索钩子

可在搜索的时候干预搜索栏的表单配置，比如增加属性，删除属性，修改属性等

hooks({ searchHook }) {
  searchHook.tap('test', (searchParams) => {
    searchParams.name = 'finnwu'
    return searchParams // 必须return 出去
  })
}

单独使用搜索栏

搜索栏默认也是全局组件，可以直接使用，如果想使用没有全局配置的搜索栏，可以在文件中手动导入

import IntegratedTable from '@futu/integrated-table';
const FlexSearchBar = IntegratedTable.FlexSearchBar;
const JsonSearchBar = IntegratedTable.JsonSearchBar;

搜索栏组件prop配置

搜索栏支持组件

开发

npm run dev
npm run mock

changelog

v1.0.24

- 增加表格组件show属性

v1.0.23

- 增加组件OneTable的导出

v1.0.22

- 修复多语言无默认语言显示pathbug

v1.0.21

- 支持多语言

v1.0.19

- 表格组件组件showPage属性
- 表格组件列嵌套，可以合并表头

v1.0.18

- 增加搜索栏获取数据方法
- 增加raido取消选择方法

v1.0.17

- 修复钩子执行顺序问题

v1.0.16

- 修复多个组件搜索数据共享问题

v1.0.15

- integrated-table 增加清除方法
- integrated-table 增加各种钩子

v1.0.14

- searchBar组件增加custom类型组件
- searchBar组件属性增加label属性
- searchBar组件prop增加hooks钩子，formInitBefore和formInitAfter

v1.0.13

- searchBar组件支持cascader类型组件

v1.0.12

- 新增搜索栏选择组件多选值序列化选项

v1.0.11

- 增加搜索栏show可以为Function的特性
- 搜索表单空值为空去掉