VXETable 按需引入不能排序,sortable不生效问题

最新推荐文章于 2024-11-08 14:01:18 发布

原创最新推荐文章于 2024-11-08 14:01:18 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #javascript #ecmascript

web前端专栏收录该内容

33 篇文章

订阅专栏

本文档介绍了在使用VxeTable时遇到的配置sortable排序不生效的问题及其解决方法，以及封装vxe-column组件后列顺序反向的奇怪现象。通过按需引入Icon组件，可以解决排序图标不显示的问题。对于列顺序反转，可能是因为组件渲染顺序导致的，需要进一步调查和调整组件内部逻辑。此外，文章还记录了这两个常见问题，供开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

根据文档，按需引入，配置sortable排序不生效问题

官方示例如下

import XEUtils from 'xe-utils'
import {VXETable, Header, Column, Colgroup, Table } from 'vxe-table'
import zhCN from 'vxe-table/lib/locale/lang/zh-CN'
VXETable.setup({
    i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args),
})
Vue.use(Header)
Vue.use(Column)
Vue.use(Colgroup)
Vue.use(Table)

解决

按需引入Icon，就会展示排序的箭头了

import {..., Icon } from 'vxe-table'
Vue.use(Icon)

其他问题记录：

vxeTable 下的vxe-column 元素，如果封装成组件，则列的顺序会反向，不知道为什么

MyColumn.vue
<template>
    <vxe-column field="1" title="1"/>
    <vxe-column field="2" title="2"/>
</template>

index.vue
<template>
    <vxe-table> 
        <myColumn />
    </vxe-table>
</template>

这样第一列title是2