one-table v0.1.5

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

二.其他参数

三:table方法（额外函数）

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

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

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

五.部分参数详解

autoRequestSetPage

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

tablePaginationConfigAuto

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

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

tableConfigField

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

tableColumnFormatter（row, column, cellValue, index）

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

btnTableColumnOption（row, type）

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

formGlobalConfigProps

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

tableFormSearchConfig

​ 表单搜索区域表单配置

tableFormBottonConfig

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

headerConfig

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