one-table

介绍

​ 基于vue和element二次开发的业务table组件，适合用来快速开发后台管理界面。

​ 感觉复杂度已经超过原生组件，如果是熟悉vue和elementui的来写应该问题不大，熟悉了就写得很快，适合用来统一代码风格。

引入方式

npm

npm install one-table -s

yarn

yarn add one-table -s

全局引入

import OneTable from 'one-table'

Vue.use(OneTable,headerConfig)

***全局注册时可选请求头参数，格式为Obeject

调用实例

<template>
  <div>
    <One-Table
      ref="oneTable"
      :table-global-config-props="tableGlobalConfigProps"
      :table-pagination-config-auto="tablePaginationConfigAuto"
      :table-config-field="tableConfigField"
      :form-global-config-props="formGlobalConfigProps"
      :requset-url="requsetUrl"
      :requset-config="requsetConfig"
      :table-column-formatter="tableColumnFormatter"
      :table-form-search-config="tableFormSearchConfig"
      :form-config-options-list="formConfigOptionsList"
      :table-form-botton-config="tableFormBottonConfig"
      :btn-table-column-option="btnTableColumnOption"
	  :header-config="headerConfig"
      @tableColumnClick="tableColumnClick"
      @btnTableClick="btnTableClick"
      @autoPage="autoPage"
    />
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
      // 表格全局参数
      tableGlobalConfigProps: {
        tableType: 'table', // 表格类型  table，tree
        treeChildren: 'children', // 为树形结构时children属性名
        treeHasChildren: 'hasChildren', // 为树形结构时hasChildren属性名
        rowKey: 'id', // 行key  为tree时必传
        selectionCheck: true, // 是否有选择框
        reserveSelection: true, // 选择框分页时是否记忆
        autoRequest: true, // 创建时自动请求
        handRequestSetPage: true, // 手动处理返回数据
        requsetType: 'get', // 默认get
        needIndex: true // 需要序号
      },
	  // 请求头参数
	  headerConfig:{
		  token:''
	  },
      // 表格全局配置
      formGlobalConfigProps: {
        size: 'mini',
        inline: true
      },
      // 请求地址
      requsetUrl: '/api/v1/user/list',
      // 额外的请求参数 自定义~比如token?
      requsetConfig: {},
      // 表格分页参数自定义
      tablePaginationConfigAuto: {
        page: 'page',
        pageSize: 'page_size'
      },
      // 搜索区域定义
      tableFormSearchConfig: [
        {
          id: 'position_type',
          name: '用户身份',
          value: '',
          type: 'select',
          placeholder: '用户身份',
          rules: []
        },
        {
          id: 'name',
          name: '用户姓名',
          value: '',
          type: 'input',
          placeholder: '请输入用户姓名',
          rules: []
        }
      ],
      tableFormBottonConfig: [
        {
          type: 'add',
          text: '添加人员',
          icon: 'el-icon-plus',
          btType: 'success',
          size: 'mini',
          loading: false
        }
      ],
      formConfigOptionsList: {
        position_type: [{ name: '客户经理', id: 1 }, { name: '支撑经理', id: 2 }],
        status: [{ name: '未激活', id: 0 }, { name: '已激活', id: 1 }]
      },
      // 表格字段定义
      tableConfigField: [
        {
          id: 'name',
          name: '姓名'
        },
        {
          id: 'role_types',
          name: '角色',
          formatter: true,
          isHtml: true
        },
        {
          id: 'bank_idcard',
          name: '银行身份证',
          width: 200
        },
        {
          id: 'option',
          type: 'option',
          name: '操作',
          width: 220,
          data: [
            {
              type: 'add',
              text: '新增',
              icon: 'el-icon-plus',
              btType: 'info'
            },
          ]
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    // 手动处理返回数据
    autoPage(data, callback) {
      callback(data.data.list.data, data.data.list.total)
    },
    // 表格操作列点击回调
    tableColumnClick(row, btType) {
      switch (btType) {
        case 'add':
          break
        case 'edit':
          break
      }
    },
    // 按钮区域点击
    btnTableClick(type) {
      switch (type) {
        case 'add':
          this.$refs.editDialog.show()
          break
      }
    },
    // 表格操作按钮显示与否
    btnTableColumnOption(row, type) {
      switch (type) {
        case 'add':
          return true
        default:
          return true
      }
    },
    // 表格格式化 ---tableConfigField设置的formater字段为true
    tableColumnFormatter(row, column, cellValue, index) {
      switch (column.property) {
        case 'role_types':
          const role_typesList = row.role_types.map(item => {
            return item.name
          })
          return `<el-tag>${role_typesList.join(',')}</el-tag>`

        default:
          return cellValue
      }
    }
  }
}
</script>

一.全局参数：tableGlobalConfigProps

| 参数名 | 说明 | 默认值 | 参数类型 | 是否必须 | 可选 | | ------------------ | ----------------------------- | ----------- | -------- | -------- | ---------- | | tableType | 表格类型 | table | String | false | table,tree | | treeChildren | 为树形结构时children属性名 | children | String | false | | | treeHasChildren | 为树形结构时hasChildren属性名 | hasChildren | String | false | | | rowKey | 行key 为tree时必传 | id | String | false | | | selectionCheck | 是否有选择框 | true | Boolean | false | true,false | | autoRequest | 创建时自动请求列表 | true | Boolean | false | true,false | | requsetType | 请求方式 | get | String | true | 常规都行 | | needIndex | 列头是否需要序号 | true | Boolean | false | true,false | | autoRequestSetPage | 是否手动处理返回数据 | false | Boolean | false | true,false |

二.其他参数

| 参数名 | 说明 | 默认值 | 参数类型 | 是否必须 | 可选 | | ------------------------- | -------------------- | ------------------- | -------- | -------- | ------------- | | requsetUrl | 表格请求地址 | | String | true | | | requsetConfig | 附加请求参数 | | Object | flase | | | tablePaginationType | 表格分页方式 | backstage | String | true | web,backstage | | tablePaginationConfigAuto | 表格分页的请求参数 | {page: pageSize: '} | Object | true | | | tableConfigField | 表格数据源字段 | [] | Array | true | | | tableColumnFormatter | 表格筛选方法 | | Function | false | | | btnTableColumnOption | 表格操作按钮显示与否 | | Function | false | | | formGlobalConfigProps | 表单全局配置 | | Object | false | | | tableFormSearchConfig | 表格搜索配置 | | Array | false | | | tableFormBottonConfig | 表格下按钮区域 | | Array | false | | | headerConfig | 请求头参数 | | Object | false | |

三:table方法（额外函数）

ps:已经继承了element-ui的table的大多数常用方法，可直接调用，如clearSelection，setCurrentRow

| 函数名 | 说明 | 返回值 | | -------------------- | -------------- | -------------- | | getMultipleSelection | 获取已选中数据 | 已选中数据列表 | | setPage | 手动设置数据 | 无 |

四.回调方法（额外函数）

ps:已经继承了element-ui的table的大多数常用方法，可直接调用，如row-click，selection-change

| 函数名 | 说明 | 参数 | | ---------------- | ------------------------------------------ | ---------------------------------------- | | tableColumnClick | 表格操作列点击回调 | row,btType(当前点击行，当前点击按钮类型) | | btnTableClick | 按钮区域点击 | type（当前点击类型） | | autoPage | autoRequestSetPage为true时，每次请求时触发 | 后台返回的data |

五.部分参数详解

autoRequestSetPage

​ 手动处理返回数据。 可能每个接口返回的数据结构不一致，需要手动处理一下。当autoRequestSetPage为true时，需要监听autoPage方法。方法会返回两个参数，一个为后台请求回来的数据（未处理），一个为callback函数，手动处理完成后必须调用callback，callback(data,total)接收两个参数，data为处理后的列表数据，total为数据总长度，当分页方式为web时，total可不传。

tablePaginationConfigAuto

​ 用来设置分页信息的参数

 因为每个项目或接口的page和pagesize参数基本会不一致，所以用来自定义page和pagesize参数，此参数有默认值为 {
    page: 'currentPage',
	pageSize: 'pagesize'
 }

tableConfigField

​ 用来设置表头信息的参数列表

| 参数名 | 说明 | 类型 | 是否必须 | | --------- | -------------------------------------------------- | ------- | -------- | | id | id值，为prop使用的值 | null | true | | name | 列头显示名 | string | true | | type | 显示类型，可选option，imgage，默认为空 | string | false | | formatter | 是否需要筛选，可以通过tableColumnFormatter进行筛选 | Boolean | false | | isHtml | 是否为html片段 | Boolean | false | | data | type为option时需要，同tableFormBottonConfig参数 | Array | false | | sortable | 是否支持排序（原生属性） | Boolean | false | | width | 行宽度（原生属性） | Number | false | | fixed | 是否固定（原生属性） | Boolean | false |

tableColumnFormatter（row, column, cellValue, index）

​ 用来筛选内容的方法，每次都会调用，必须返回处理值

| 返回值 | 说明 | | --------- | ----------- | | row | 当前行 | | column | 当前列 | | cellValue | 当前cell值 | | index | 当前行index |

btnTableColumnOption（row, type）

​ 用来筛选行是否显示操作按钮，这非常常见，比如这一行的状态为未激活，那么操作按钮就不应该显示激活按钮。必须返回处理值

| 返回值 | 说明 | | ------ | -------------------------------- | | row | 当前行 | | type | 当前按钮type，为data-option-type |

formGlobalConfigProps

​ 用来设置表格搜索区域表单的参数列表....还没想到支持些啥~

| 参数 | 说明 | 类型 | 是否必须 | | ---- | ---------------- | ------ | -------- | | size | 搜索区域表单大小 | String | false |

tableFormSearchConfig

​ 表单搜索区域表单配置

| 参数 | 说明 | 类型 | 是否必须 | | ---------------- | ------------------------------------------------------------ | ------ | -------- | | id | 表单id，即搜索时使用的参数名 | String | true | | name | 表单组件名字 | String | false | | value | 组件默认值 | String | false | | type | 组件类型，支持input,select,date,daterange,rate,checkbox，inputNumber，cascader | String | true | | placeholder | 提示语 | String | false | | rules | 表单校验规则 | Array | false | | min | 为inputNumber,rate时支持 | Number | false | | max | 为inputNumber,rate时支持 | Number | false | | value-format | 为时间时支持 | String | false | | format | 为时间时支持 | String | false | | rangeSeparator | 中置文字（时间范围时支持） | String | false | | startPlaceholder | 开始时间提示（时间范围时支持） | String | false | | endPlaceholder | 结束时间提示（时间范围时支持） | String | false |

tableFormBottonConfig

搜索区域下方的按钮区域配置

| 参数 | 说明 | 类型 | 是否必须 | | ------- | ------------------------------------------------------------ | ------- | -------- | | type | 自定义类型 | String | true | | text | 按钮文字 | String | true | | icon | 按钮图标 | String | false | | btType | 按钮类型，primary / success / warning / danger / info / text | String | false | | size | 按钮大小，medium / small / mini | String | false | | loading | 按钮加载状态 | Boolean | false |

headerConfig

自定义请求头参数，两种方式添加 1.如上直接绑定到组件。 2.在Vue.use(OneTable,headerConfig)时初始化，则该项目下所有one-table请求都会带上该请求头