1. x-table-vue

x-table-vue

x-table-vue

表格功能的 VUE 实现。

源码有完整示例代码。

主要功能

  • 固定表头,浏览器和固定区域
  • 固定列
  • 分页功能
  • 拖动调整列宽度
  • 列的拖拽交互
  • 单元格合并
  • 行展开收起
  • extend 行参与筛选
  • 透视表功能
  • 自定义单元格的 class 和 style
  • 表格底部
  • 表头搜索、筛选、排序
  • checkbox 选择列
  • waterfall 滚动加载更多
  • 组件单元格

Demo

版本


  • v4.0.5

基于


安装


npm install x-table-vue

使用


全局引入

在main.js中引入

import xTable from 'x-table-vue';
vue.use(xTable);

或者 在组件中引入

import { XTable } from 'x-table-vue';

组件中使用

<x-table
    :is-use-storage="false"
    :is-use-single-table="isUseSingleTable"
    :is-fix-header="isFixHeader"
    :is-sticky="isSticky"
    :columns=tableColumns
    :config="tableConfig"
    :data="tableData"
    :expand-data="tableExpandData"
    :expand-action="tableExpandAction"
    :expand-span-column-data="tableExpandSpanColumnData"
    :title="tableHeaderTitle"
    :header-data="tableHeaderData"
    :footer-data="tableFooterData"
    :page-data="pageData"
    :sort-data="sortData"
    :search-data="searchData"
    :filter-data="filterData"
    :pivot-table="pivotTable"
    :custom-cell="customCell"
    :expand-join-filter-search-columns="['c2']"
    :expend-filter-search-result-show-type="'fit'"
    @handleTable="handleTable"
>
    <tempalte v-slot:[`th-${dataIndex}`]="{ record, text }">表头单元格内容插槽</tempalte>
    <tempalte v-slot:[`th-sort-${dataIndex}`]="{ record, text }">表头排序插槽</tempalte>
    <tempalte v-slot:[`th-search-${dataIndex}`]="{ record, text }">表头搜索插槽</tempalte>
    <tempalte v-slot:[`th-filter-${dataIndex}`]="{ record, text }">表头筛选插槽</tempalte>
    <tempalte v-slot:th-drag>表头拖动交换位置插槽</tempalte>
    <tempalte v-slot:th-resize>表头拖动表格宽度插槽</tempalte>
    
    <tempalte v-slot:[`td-${dataIndex}`]="{ record, text, expand }">单元格内容插槽,expand的状态 ''/open/close </tempalte>
    
    <tempalte v-slot:[`tf-${dataIndex}`]="{ record, text }">尾部单元格内容插槽</tempalte>
</x-table>

参数说明


参数 类型 说明
isUseStorage boolean 是否启用storage缓存用户拖动交互后的column数据
isUseSingleTable boolean 是否使用单表格,单表格为只有一个table标签,不支持固定在浏览器顶部,需要设置height属性
isFixHeader boolean 固定表头开关
isSticky boolean 固定列开关
config object 表格配置数据,具体参考下方配置说明
columns array 表格所有的列数据,具体参考下方表头说明
title array 表头标题数据
data array 表格数据
expandData object 可展开行数据,只支持一层展开
expandAction object 控制可展开行的展开关闭
expandSpanColumnData object 控制展开行合并的column数据,数据格式同columns
headerData array 表头数据
footerData array 表尾数据
pageData object 分页信息
sortData object 列排序信息,每次只支持一列排序
searchData object 列查询数据,查询数据会叠加计算
filterData object 列筛选数据,筛选数据会叠加计算
pivotTable array 透视表,需要合并行的列,[列索引, 列索引]
customCell object 自定义单元格class和style
expandJoinFilterSearchColumns array 参与筛选和查询的extendData [dataIndex, dataIndex]
expendFilterSearchResultShowType string extend筛选结果的展示方式 fit:符合结果的extend展开 open:全部打开 close:全部不打开
checkboxSelectedData array checkbox 开启时的已选中值
isWaterfall boolean 开启滚动加载更多

tableConfig 说明

{
    key: 'table', // 同页面有多个table组件时,区分不同表格使用,主要用在dom id上,所以需保证唯一。
    scrollHeight: '100%', // 表格的高度,超过高度,table会出现y轴滚动条,设置成100%,则根据父组件的设置。
    scrollWidth: '100%', // 表格的宽度,超过宽度,tbale会出现x轴滚动条,设置成100%,则根据父组件的设置。
    scrollBarWidth: 15, // 滚动条宽度
    scrollBarHeight: 15, // 滚动条高度
    miniWidth: '160px', // columns 里没有设置表格宽度的列会默认使用最小width
    resizeMin: 160, // 动态改变表格列宽时,最小的宽度,小于当前宽度,会取该宽度值
    resizeMax: 500, // 动态改变表格列宽时,最大的宽度,大于当前宽度,会取该宽度值
    border: 1, // 0 无边框, 1 有边框, 2 四周无边框
    rowKey: 'id', // 循环表格数据的时候,:key 会取该设置的 data key 的值
    noWrap: true, // 是否运行表格数据换行
    isUseNoWrapTitle: true, // 是否显示隐藏时的title
}

columns 说明

checkbox 为 dataIndex 的保留值,需要使用多选按钮时,把 dataIndex 设置为该值。

{
    dataIndex: `显示数据的索引,对应 data 里的 key`,
    dragGroup: '', // 只在表头第一行绑定,拖动交互表格列的组,表头支持多组各种拖动更换顺序,不支持不同组之间的拖动。
    resizeable: true, // 是否开启拖动列改变列宽度,只在表头第一行绑定
    align: '', // 内容的对齐方式 left / right
    sticky: 'left'; // 列固定的方向,left / right
    widthLock: false, // 列宽固定,固定的列宽不会被重新赋值
    width: '220px'; // 列宽度,如果固定列,这个值需设置
    serach: true; // 是否开启查询, 通过 slot 设置样式,并自行获取用户查询的值,通过改变prop searchData,触发表格查询
    sort: 'init'; // 是否开启排序 init / up / down, 通过 slot 设置样式,并自行获取用户设置的值,通过改变prop sortData值,触发表格排序。
    filter: true; // 是否开启筛选, 通过 slot 设置样式,并自行获取用户选择的值,通过改变prop filterData值,触发表格筛选。
}

title、data、headerData、footerData 说明

{
  colSpan: 1, // 合并的列数量,如果被合并,设置为 0,如果合并别人,设置为合并的列数(包含自己),例如 3
  rowSpan: 1, // 合并的行数量,如果被合并,设置为 0,如果合并别人,设置为合并的行数(包含自己),例如 3
  value: '', // 名称值
}

expandData 说明

{
    rowKey: {
        type: '', // span时为行合并,data时为数据合并
        isOpen: false, // 是否打开,响应捕捉
        data: [], // 数据同data,span时需设置colSpan为列数
    }
}

expandAction 说明

{
    rowKey: 'open/close'
}

expandSpanColumnData 说明

{
    common: { // span的 column 数据
        dataIndex: `显示数据的索引,对应 data 里的 key`,
        align: '', // 内容的对齐方式 left / right
    }
}

pageData 说明

{
    page: 1, // 当前页码
    size: 20, // 每页显示的条数
}

sortData 说明

{
    dataIndex: '', // 排序列的索引
    sortType: '', // 排序类型 init / up / down
}

searchData 说明

{
    dataIndex // 搜索列的索引 : {
      isShow: false, // 是否显示搜索弹层
      value: '', // 搜索的字符串
    },
    dataIndex // 搜索列的索引 : {
      isShow: false, // 是否显示搜索弹层
      value: '', // 搜索的字符串
    },
}

filterData 说明

{
    dataIndex // 筛选列的索引 : {
      isShow: false, // 是否显示筛选弹层
      value: [], // 已选中的值
    },
    dataIndex // 筛选列的索引 : {
      isShow: false, // 是否显示筛选弹层
      value: [], // 已选中的值
    },
}

pivotTable 说明

按下标顺序一级一级的透视

[
    dataIndex // 筛选列的索引
    dataIndex // 筛选列的索引
]

customCell 说明

自定义单元格的 class 和 style

{
    // record 当前行的值,dataIndex 当前列的索引
    header: (record, dataIndex) => {
       return {
          class: {},
          style: {},
       }
    },
    body: (record, dataIndex) => {
       return {
          class: {},
          style: {},
       }
    },
    footer: (record, dataIndex) => {
       return {
          class: {},
          style: {},
       }
    }
}

expandJoinFilterSearchColumns 说明

extend 参与表头查询和筛选的列,参数为列的 dataIndex

[dataIndex, dataIndex]

expendFilterSearchResultShowType 说明

extend 搜索结果的展示方式

fit:extend 里有符合条件的展开
open:只有父和子里有一个符合条件就展开
close:只展示父

handleTable 说明

组件会把变化 emit 出来,格式为:

{
    type: 'page',
    data: {
        page: '', // 当前页码
        total: '', // 当前条件下的数据总条数
    }
}

样式说明 less

组件只完成了核心功能,样式用户可根据各自的UI交互,自行完成。

样式 说明
.x-table-wrapper 最外层包裹层
.x-table-area 表格区域|
.x-table-content table包裹层
thead td .sort-up 表头的排序向上包裹层
thead td .sort-down 表头的排序向下包裹层|
.x-table-border 表格边框
.x-table-fix-header 固定表头时的表头
.x-head-dom thead的class
.x-sticky-shadow 列固定的阴影
.x-sticky-left-shadow 列固定的左阴影
.x-sticky-right-shadow 列固定的右阴影
.x-resize-dom-handle 拖动改变列宽时候的响应元素
.x-drag-dom-handle 拖动交互列顺序时候的响应元素
.x-page-area 分页区域
/deep/ .x-table-wrapper {
   ....
}