vue2-el-table

VUE elementUI table

安装:

npm i vue2-el-table

使用：

注意：本组件依赖如下包，如果没有请安装
elementUI
   npm i element-ui -S
axios
   npm install axios
sortablejs
   npm install sortablejs --save

 tableData绑定整个table所用数据，格式请查看下列文档
 @eventAll返回整个组件回调，返回格式查看下列文档
 <tables v-bind="tableData" @eventAll="tableEvent"/>
   //此处可使用插糟，格式查看下列文档
 </tables>

import tables from 'vue2-el-table'
components: {
   tables
 }

温馨提示:

如下依赖包已集成部份常用API，如需使用请安装
    npm i vue-el-table-api
    查看API详情 https://www.npmjs.com/package/vue-el-table-api

table数据结构:

组件控制参数：

tableData:{
  如果都不需要配置borderParams，直接不写即可,如用只需配置所用到的功能即可，不用的直接不写
  borderParams: {
    operationStatus: true, // 是否显示操作列
    border: false, // 表格是否显示边框
    selection: true, // 多选 如果highlightCurrentRow为true,selection必为false
    stripe: false, // 是否显示斑马线
    highlightCurrentRow: false, // 单选 如果selection为true,highlightCurrentRow必为false
    maxHeight: 'auto', // 设置最大高度
    showSummary: false, // 是否合计
    spanMethod: null, // 行合并还是列合并
    index: false, // 是否显示序号
    emptyText: '暂无数据', // 如数据为空的提示语
    RowDrag: true, // 是否需要行拖拽
    isPage: true // 是否显示分页组件 默认为false
    isDefaultCheckAll: true // 是否默认全选所有数据
    isShowdbTable: true // 是否显示上table勾选，下table显示  必须和selection同时为true
  },
  
  //当borderParams的isPage为true时添加如下配置(必填项以后可以不写)，如果为false时，可以直接不写整个page
  page: {
     url: '/api/prsBuckle/showBalanceDetails', // 列表请求接口 必填 
     currentPage: 1, // 当前页 必填
     pageSizes: [10, 20, 30, 40, 50, 100], // 页显示个数选择器 必填
     pageSize: 10, // 页显示个数 必填
     pageInfo: {}, // 分页传参 必填 初始值可为{}
     method: 'post', // 默认为get
     background: true // 是否带有背景色的分页 默认false
     layout:"total, sizes, prev, pager, next, jumper" //默认为全部
  },
  
  /* 表头对象参数
     1、title标题名 必填
     2、value字段名 必填
     3、width单元格宽度 '180'
     4、align对齐方式[left,center,right] 默认center
     5、fixed固定表格[left,center,right]
     6、sortable是否排序[true, false, 'custom'] custom为后台排序
     7、filters列条件查询   [{ text: '名称', value: '值' }] 值会对应表头的value
     8、transitions 数据转换   [{ key: '100', value: '一百' }]
          注：等同于使用管道过滤 如 if(params == '100') reutn '一百' else '无数据'
  */
  
  tableTitle:[
     {
            title: '会员管理',
            align: 'center',
            value: 'memberManage',
            children: [
                  {
                    title: '金额',
                    value: 'money',
                    width: '180',
                    align: 'center',
                    sortable: 'custom',
                    filters: [{ text: '金额100', value: '100' }, { text: '金额200', value: '200' }],
                    transitions: [
                      { key: '100', value: '一百' },
                      { key: '200', value: '二百' },
                      { key: '300', value: '三百' },
                      { key: '400', value: '四百' },
                      { key: '500', value: '五百' }
                    ]
                  }
                ]
    },
  ],
  
  //表格数据
  tableData: []
}

组件回调说明：

tableEvent (eventSource) {
   switch (eventSource.key) {
        case 'selection': // 主table多选
          console.log(eventSource.data)
          break
        case 'dbTableSelection': // borderParams.isShowdbTable为true时的dbTable多选
          console.log(eventSource.data)
          break
        case 'getingData': // borderParams.isShowdbTable为true时点击下方提交，获取dbTable数据
          console.log(eventSource.data)
          break
        case 'radioButton':// 主table单选
          console.log(eventSource.data)
          break
        case 'sort':// 主table拖拽
          console.log(eventSource.data)
          break
        case 'custom':// 主table后台排序
          console.log(eventSource.data)
          break
        case 'init':// 此处一般用于分页返回数据进行覆盖table数据
          console.log(eventSource.data)
          break
  }
}


注:page里，有一个请求，需要返回的数据结构如下，如果不符合即无法使用，或者使用组件代码方式来使用本组件
https://github.com/awfifnypm/vue-element-table/

数据状态码：res.data.code == 200 成功为200
列表数据总数量：res.data.total

插糟使用方式:

<tables v-bind="tables" @eventAll="tableEvent">

<!-- 注:目前只可能获取一级表头插槽，如果对二级以上表头数据，请参照下面例子 -->
<!-- 一级表头获取插槽使用方法 -->
<!-- <template #money> 把money改成对应的表头字段即可获取对应的插糟
    <el-table-column
    label="余额slot"
    prop = "money"
    align = "right"
    width = "180"
    >
    </el-table-column>
</template> -->

<!-- 二级表头获取插槽使用方法，多级以此类推 -->
<template #yanshi>
    <!--
    此处设置el-table-column会覆盖table组件里默认el-table-column，
    el-table-column操作比el-table官方组件最外层多了一个template
    -->
    <el-table-column
    label="自定义列一演示"
    align = "center"
    width = "180"
    >
      <!--
      如果下级数量过多，但又需要在页面操作，此处支持v-for遍历
      一、template处改为 <template #yanshi="row">
      二、使用row.children数据源遍历
      三、通过索引找到要操作项，进行逻辑操作 可使用v-if v-else或其它
      -->
      <el-table-column
      label="自定义列一"
      prop = "column1"
      align = "center"
      width = "180"
      >
          <template slot-scope="scope">
          	{{scope.row.column1 + ' Hello'}}
          </template>
      </el-table-column>
	</el-table-column>
</template>

  <!-- 下面为操作列 operationStatus为true使用 -->
  <template v-slot:operation="scope">
      <el-button @click.native="delFuc(scope.row,scope.$index)">删除</el-button>
  </template>
</tables>

如需自定义开发:

打开链接 https://github.com/awfifnypm/vue-element-table/
下载组件源码进行自定义修改使用

如需帮助请联系 vx:czl630964