vxe-table v4版本使用注意事项

1.v4版本(项目已经升级为VxeUI)把之前的vxe-table项目分成了几类:比如按钮,分页等组件 放到了vxe-pc-ui项目里,而vxe-table则只剩与其他前端UI框架类似的专注表格的功能,所以要正常使用原来的 分页/工具栏等功能,必须按照文档的默认安装,安装3个项目包,如下:

 pnpm add xe-utils@3.7.9 vxe-pc-ui@4.9.44 vxe-table@4.16.21

然后在项目里,一般是main.ts文件引入:

 import VxeUIAll from 'vxe-pc-ui'

import 'vxe-pc-ui/es/style.css'

import VxeUITable from 'vxe-table'

import 'vxe-table/es/style.css'

createApp(App).use(VxeUIAll).use(VxeUITable).mount('#app')

2.表尾单元格合并文档示例 使用的 merge-footer-items 属性有bug,现在应该使用merge-footer-cells;

在代码中使用时也可以看到,MergeFooterItems类型是划了删除线,提示 [已废弃，请使用 VxeTablePropTypes.MergeFooterCells]

 

const mergeFooterItems = ref<VxeTablePropTypes.MergeFooterItems>([
    { row: 0, col: 1, rowspan: 1, colspan: 3 },
    { row: 1, col: 3, rowspan: 1, colspan: 2 }
  
])

 

3.单元格的渲染器,除了自定义,其本身有默认的一些可以使用

自定义的渲染器文档也写明了:先检查是否配置好 jsx/tsx 运行环境，如果没配置将无法使用。渲染器的实现难度极高，不适合初级使用，出错将会全局影响功能、问题排查难度较高

所以简单需求使用默认提供的即可,在文档 [单元格-渲染]里有一些示例,还有几个没提到,从api里看是有的,实际测试也可用,使用方法是一样的,例如VxeText

<vxe-column title="检查人员" field="checkOpera" min-width="120" align="center" :cell-render="{name: 'VxeText', props: { status: 'primary' }}"
                        >
                        </vxe-column>

这样字体颜色就变成了蓝色

 

4.导出Excel,使用第三方插件,基础表头样式默认是导出的,但是table里设置的其他样式,比如字体颜色,单元格背景色等都没有导出,只有FormatNumberInput这个渲染器的负数变红配置是可以导出颜色的,

所以如果需要样式,需要按照导出插件文档的[自定义样式]一章,进行二次重复处理,稍显麻烦

 

5. 当要同时 对某些单元格 数据进行 格式化和样式处理,或者进行牵扯到数据相关的 样式处理,比如 对单元格内容"总量(100)",只对括号里的内容设置为红色,则最合适的方法为 使用 [自定义插槽模板]功能.

formatter只能改变内容,不能改变样式;cell-style 或 row-style只能改变样式,不能改变内容.