Vxe-advance-table-v2 NPM

vxe-advance-table-v2(当前版本 V1.3.6)

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

兼容版本

Vue2.6+

其它说明

（1）本插件在 vex-table（版本号为 3.7.6）基础上进行二次开发，主要实现类 position:sticky 功能的同时支持底部区域的浮动，里面仅包含部分可用组件，一些 props 配置项及 emit 回调均同原插件 api 支持同名配置（2）多个 table 的使用时，因 vue 更新机制，请务必加上 key 属性，部分特殊情况也可以 import {refreshTable},直接调用 refreshTable 进行表格刷新

Install

	npm i vxe-advance-table-v2 -S

	//main.js
	import veu from "vxe-advance-table-v2";
	Vue.use(veu)

	//使用示例
	<vxe-advance-table
        scroll-for="hello"
        :table-data="tableData"
        dragable
        async-column
        :column-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>

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 指参数