x-table-vue

表格功能的 VUE 实现。

源码有完整示例代码。

主要功能

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

Demo

版本

• v4.0.5

基于

• vue2/vue3
• sortablejs
• lodash
• css sticky 浏览器支持
• setPointerCapture 浏览器支持

安装

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 {
   ....
}