vxe-advance-table-v3(当前版本 V1.0.6)

简单、便捷、高效的 vue 浮动式表格组件

兼容版本

Vue3.4.20+

其它说明

（1）本插件在 vex-table（版本号为 4.5.21）基础上进行二次开发，主要实现类 position:sticky 功能的同时支持底部区域的浮动，里面仅包含部分可用组件，一些 props 配置项及 emit 回调均同原插件 api 支持同名配置 （2）多个 table 的使用时，建议加上 key 属性，并用initTable进行进行表格状态更新

Install

	npm i vxe-advance-table-v3 -S

	//main.js
	import veu from "vxe-advance-table-v3";
   import "vxe-advance-table-v3/dist/style.css";
	Vue.use(veu)

	//使用示例
	<vxe-advance-table
        scroll-for="hello"
        :table-data="tableData"
        dragable
        async-column
        :columns-config="columnConfig"
        :row-config="{ height: 35 }"
        :base-config="columnConfig"
        :sort-config="{ trigger: 'cell', sortMethod: customSortMethod }"
        @sort-change="handleCheckSortClear"
        :merge-cells="mergeCells"
        @onNoColumn="onNoColumn"
        @onNoSetupColumn="onNoSetupColumn"
        @onDragError="onDragError"
        @checkbox-change="handleSelectionChange"
        @checkbox-all="handleSelectionChange"
      >
        <template #bottom>
          <button>表格1button</button>
        </template>
      </vxe-advance-table>

    //*****多个页面应用时，在适当时机对表格进行初始化（减小渲染压力）
	import {initTable} from "vxe-advance-table-v3";
   	nextTick(()=>{
		initTable();
   	})

Attribute

| 属性 | 类型 | 说明 | 默认 | 是否必传 | | -------------------- | --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | -------- | | scroll-y | Object | 列表实时数据 | 默认 enabled: true, gt:20 | false | | max-height | String / Number | 同 vxe-table 的表格最大高度 | 默认 1000 | false | | scroll-for | String | id,将参照哪个父元素 id 进行浮动头部及底部，=>即父元素有 id 属性,另外特殊场景请调用autoSyncBottomData(如$refs.table.autoSyncBottomData(this))以同步底部数据，注意传this | window | false | | refresh-target | window/String | 处理因别的父元素滚动造成的位置错误,String时为具体的id如="app" | "" | false | | gt | Number | vxe-table 配置默认大于多少条时执行启用虚拟渲染 | 20 | false | | auto-fixed-left | String / Number | 前 N 条自动 fixed left | 0 | false | | dragable | Boolean | 是否开启拖动表头功能 | false | false | | async-column | Boolean | 是否可动态列配置 | false | false | | is-group-column | Boolean | 是否表头分组表格（注意使用此参数后不再支持 draggable、async-column 及 auto-fixed-left 等功能，若开启此功能 column-config 以 children 树表示子表头即可，具体属性与 column-config 一致） | false | false | | column-before-reset | Function / null | 动态列配置恢复默认前置 | null | false | | column-before-update | Function / null | 动态列配置保存前置 | null | false | | before-open-dialog | Function / null | 打开 dialog 前置 | null | false | | model-title | String | modelTitle | 自定义列设置 | false | | no-drag-list-tips | String | 动态配置列信息无数据 tips | 请先勾选需要显示的字段内容！ | false | | no-error | Boolean | 是否拖动出错时不显示提示信息 | false | false | | border | Boolean | 同 vxe-table | true | false | | column-config | Array | 动态列字段配置，其中 filedEn 必须唯一,下面详解内部字段 | [] | false | | base-config | Array | 默认配置，字段同 columnConfig | [] | false | | table-data | Array | 数据 | [] | false |

column-config 字段配置

| 属性 | 类型 | 说明 | 是否必传 | | --------------- | -------- | ----------------------------------------------------------------------------------------------------------------- | -------- | | filedEn | String | 取值 value-key | true | | filedZh | String | 表头 label | true | | titlePrefix | Object | 表头前面的显示值，同 vxe-table | false | | treeNode | Boolean | 同 vxe-table,是否展开行，需要配置 tree-config 且数据需要有层级关系，如 id 和 parentId | false | | checked | Boolean | 是否显示此列 | true | | slotName | String | 传此则可自定义 slot，同时支持 th 的 slot（slotName+"Header"）,如 text,则内容 slot 为#text,表头 slot 为 textHeader | false | | minWidth | String | 最小宽 | false | | showOverflow | Boolean | 是否 ellipisis,不填默认 true | false | | asyncColumn | Boolean | 是否在此列增加动态列的配置按钮（需配置 props=>asyncColumn） | false | | fixed | String | 可选 left/right | false | | sortable | Boolean | 是否可排序 | false | | sortBy | Function | 自定义 sortBy 方法,有 sortBy 就不能用 customSortMethod,有 sortBy 最后也会触发 sort-change | false | | disabled | Boolean | 列显示配置=>是否不可配置 | false | | className | String | 同 vxe-table className | false | | headerClassName | String | 同 vxe-table headerClassName | false | | align | String | 字体对齐可选 left/right | false | | headerAlign | String | 字体对齐可选 left/right | false | | filters | Object | 同 vxe-table filters | false | | formatter | Function | 同 vxe-table formatter | false |

emit 回调函数,部分同 vxe-table,以下是可能会用到的回调方法

| 函数名 | 说明 | 返回值 | | --------------- | ------------------------ | ------------ | | onNoColumn | 请至少保留一列数据！ | | | onNoSetupColumn | 请至少保留一列可配置列！ | | | onDragError | 固定列不允许拖动！ | | | checkbox-change | checkbox | 同 vxe-table | | checkbox-all | checkbox all | 同 vxe-table | | sort-change | 排序 | 同 vxe-table |

slot

| name | 说明 | | --------------------- | ------------------------------------------------------------------------- | | bottom | 表格底部内容，不浮动，若配置 scroll-for，将在特定场景进行浮动 | | {{slotName}} | 若 column-config 配置了 slotName,则可使用#slotName 进行内容插槽配置 | | {{slotName+'Header'}} | 若 column-config 配置了 slotName,则可使用#slotNameHeader 进行表头插槽配置 |

其它配置说明

| name | 说明 | | --------------------------------- | ---------------------------------------------------------------------------------------------- | | 合计列 | footerMethod/show-footer,不支持与 scrollfor 共用 | | 展开问题 | column-config 项配置 treeNode=true,其它同 tree-config，由 id 和 parentId 决定层级关系 | | 通过 refs 调用 vxe-table 原有方法 | 可通过自己加的 ref 调用 handleOriginFn(fn,param1,param2,...),其中 fn 指原有方法名,param 指参数 |

Other

1、如果有其他问题邮件沟通[email protected]或者加 qq1195669615。