vxe-table按需引入的坑

vxe-table推荐全局引入, 按需引入有坑

1. 按需引入

npm install xe-utils vxe-table@legacy
npm install babel-plugin-import -D

//main.js中
import Vue from 'vue'
import 'xe-utils'

import {
  Footer,
  Icon,
  Column,
  Table,
  Tooltip
} from 'vxe-table'

import 'vxe-table/lib/index.css'
Vue.use(Icon)
Vue.use(Column)
Vue.use(Table)
Vue.use(Footer)
Vue.use(Tooltip)

//babel.config.js中
module.exports = {
  plugins: [
    [
      "import",
      {
        "libraryName": "vxe-table",
        "style": false // 样式是否也按需加载
      }
    ]
  ]
}

2. 遇到的坑

1. 按需引入获取VXETable 全局对象报错

按照官方引入, 报如下错误, 百度的结果是将babel-plugin-import降到1.13.6版本, 经过尝试没有用, 我这里没有用到国际化, 因此直接没有引入

//官方按需引入示例,
import {
  VXETable,
} from 'vxe-table'

2. 按需引入添加合计行报错

报错:
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.

原因

此地只是使用了table与column, 所以我只注册了两个, 而在报错后, 在官方按需实例文档中并未找到关于table-footer的引入, 直接引入TableFooter又会报错找不到, 在源码统一导出中, 实际上是导出的Footer, 添加Vue.use(Footer)即可解决

//template部分
  <vxe-table
      show-footer
      :row-config="{isHover: true}"
      :footer-method="footerMethod"
      :data="tableData">
      <vxe-column type="seq" width="60"></vxe-column>
    </vxe-table>

解决

import {
  Footer,
  Column,
  Table
} from 'vxe-table'
Vue.use(Column)
Vue.use(Table)
Vue.use(Footer) //添加Footer解决

3.按需引入单元格溢出省略号show-overflow="tooltip"不生效

//template部分代码
<vxe-table
      :data="tableData">
      <vxe-column field="role" title="角色" show-overflow='tooltip'></vxe-column>
</vxe-table>

正常的样式

不起作用时

解决:

这个功能依赖少Tooltip组件, 需要引入了Tooltip

import {
  Column,
  Table,
  Tooltip
} from 'vxe-table'
Vue.use(Column)
Vue.use(Table)
Vue.use(Tooltip)