vxe-table 更新最新版本后图标兼容性问题

最新推荐文章于 2026-05-11 11:39:52 发布

原创最新推荐文章于 2026-05-11 11:39:52 发布 · 3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #数据库 #javascript

vxe-ui 专栏收录该内容

105 篇文章

订阅专栏

在升级vxe-table到v3.6+或v4.3+后，遇到图标显示问题，因为新版本使用了字体图标，导致在非PC环境中可能无法正常显示。为解决这个问题，可以参照官方文档提供的方法，将表格图标回滚到以前的class渲染方式，以确保兼容性。

vxe-table 更新最新版本后图标兼容性问题

原先老版本是使用 class 渲染图标，v3.6+ / v4.3+ 新版本使用了字体图标。
对应如使用非PC环境导致图标无法显示、乱码。可以使用官方提供方法还原。

官方文档说明：https://vxetable.cn/#/table/start/icons

使用该方式就可以将表格图标回滚到旧方式：

VXETable.setup({
  icon: {
	  "TABLE_SORT_ASC": "vxe-icon--caret-top",
	  "TABLE_SORT_DESC": "vxe-icon--caret-bottom",
	  "TABLE_FILTER_NONE": "vxe-icon--funnel",
	  "TABLE_FILTER_MATCH": "vxe-icon--funnel",
	  "TABLE_EDIT": "vxe-icon--edit-outline",
	  "TABLE_HELP": "vxe-icon--question",
	  "TABLE_TREE_LOADED": "vxe-icon--refresh roll",
	  "TABLE_TREE_OPEN": "vxe-icon--caret-right rotate90",
	  "TABLE_TREE_CLOSE": "vxe-icon--caret-right",
	  "TABLE_EXPAND_LOADED": "vxe-icon--refresh roll",
	  "TABLE_EXPAND_OPEN": "vxe-icon--arrow-right rotate90",
	  "TABLE_EXPAND_CLOSE": "vxe-icon--arrow-right",
	  "BUTTON_DROPDOWN": "vxe-icon--arrow-bottom",
	  "BUTTON_LOADING": "vxe-icon--refresh roll",
	  "SELECT_LOADED": "vxe-icon--refresh roll",
	  "SELECT_OPEN": "vxe-icon--caret-bottom rotate180",
	  "SELECT_CLOSE": "vxe-icon--caret-bottom",
	  "PAGER_JUMP_PREV": "vxe-icon--d-arrow-left",
	  "PAGER_JUMP_NEXT": "vxe-icon--d-arrow-right",
	  "PAGER_PREV_PAGE": "vxe-icon--arrow-left",
	  "PAGER_NEXT_PAGE": "vxe-icon--arrow-right",
	  "PAGER_JUMP_MORE": "vxe-icon--more",
	  "INPUT_CLEAR": "vxe-icon--close",
	  "INPUT_PWD": "vxe-icon--eye-slash",
	  "INPUT_SHOW_PWD": "vxe-icon--eye",
	  "INPUT_PREV_NUM": "vxe-icon--caret-top",
	  "INPUT_NEXT_NUM": "vxe-icon--caret-bottom",
	  "INPUT_DATE": "vxe-icon--calendar",
	  "INPUT_SEARCH": "vxe-icon--search",
	  "MODAL_ZOOM_IN": "vxe-icon--square",
	  "MODAL_ZOOM_OUT": "vxe-icon--zoomout",
	  "MODAL_CLOSE": "vxe-icon--close",
	  "MODAL_INFO": "vxe-icon--info",
	  "MODAL_SUCCESS": "vxe-icon--success",
	  "MODAL_WARNING": "vxe-icon--warning",
	  "MODAL_ERROR": "vxe-icon--error",
	  "MODAL_QUESTION": "vxe-icon--question",
	  "MODAL_LOADING": "vxe-icon--refresh roll",
	  "TOOLBAR_TOOLS_REFRESH": "vxe-icon--refresh",
	  "TOOLBAR_TOOLS_REFRESH_LOADING": "vxe-icon--refresh roll",
	  "TOOLBAR_TOOLS_IMPORT": "vxe-icon--upload",
	  "TOOLBAR_TOOLS_EXPORT": "vxe-icon--download",
	  "TOOLBAR_TOOLS_PRINT": "vxe-icon--print",
	  "TOOLBAR_TOOLS_ZOOM_IN": "vxe-icon--zoomin",
	  "TOOLBAR_TOOLS_ZOOM_OUT": "vxe-icon--zoomout",
	  "TOOLBAR_TOOLS_CUSTOM": "vxe-icon--menu",
	  "FORM_PREFIX": "vxe-icon--question",
	  "FORM_SUFFIX": "vxe-icon--question",
	  "FORM_FOLDING": "vxe-icon--arrow-top rotate180",
	  "FORM_UNFOLDING": "vxe-icon--arrow-top"
	}
})