在 VTable 中，我们可以使用自定义图标功能来提高表格的可读性和视觉效果。可以通过 icon 和 headerIcon 来分别分别配置表头及 body 显示的单元格图标：

• headerIcon 表头单元格图标配置，它可以帮助我们设置表头的图标样式。配置项根据 ColumnIconOption 的类型进行定义，具体可以参考给定的配置。
• icon 则用于配置 body 单元格的图标。

        配置具体内容为ColumnIconOption类型的对象，也可以通过传递一个自定义函数，动态设置单元格的图标样式。ColumnIconOption 具体定义可以参考：https://visactor.io/vtable/option/ListTable-columns-text#icon

        在VTable中更新自定义排序图标，可以使用register.icon() 方法注册新的排序图标。示例代码如下：

VTable.register.icon("customSortIcon", {type: "svg",svg: "/sort.svg",width: 22,height: 22,funcType: VTable.TYPES.IconFuncTypeEnum.sort
});

        注意：具有切换状态的功能性的图标请务必配置上 funcType，例如排序功能 funcType 配置 sort，name 配置 sort_normal 或 sort_downward，或 sort_upward。这样才能准确替换到内部相应的 icon 图标。

        接下来，我们将对下图进行改造，在相应位置新增自定义图标，来提高表格的可操作性、可读性，以及增加视觉效果。

一、模拟数据

        这里数据来源于VTable官方树结构的模拟数据，数据地址：https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/company_struct.json，希望下载到本地再引入的，将地址粘贴到浏览器地址中，打开json页面可按Ctrl+S保存到本地。

        在本地创建data.json文件，用于存储json数据，由于数据量较大，这里就不粘贴了，大家自行引用或下载。

二、表头图标配置

        首先，我们来看一个使用 headerIcon 来绘制一个成员图标，并完成以下几步：

1. 鼠标移入单元格时才显示成员图标
2. 鼠标移入图标更新热区样式
3. 鼠标在图标上方时，显示气泡提示框，说明该列相关信息。

2.1 绘制表格

       在Vue项目中，如何安装VTable已经在之前一篇文章中讲解过，不了解朋友可以前去查看，地址：VisActor/VTable - 快速搭建表格-CSDN博客。

        打开Vue项目，创建index.vue文件，引入VTable和模拟数据，并在data中定义好表格所需析配置项参数，最后在mounted()周期函数中初始化表格。代码如下：

<template><div class="container" ref="vtable" style="width: 800px; height: 500px;"></div>
</template>
<script>
import * as VTable from '@visactor/vtable'
import TestData from './data/data.json'
export default {data () {return {tableInstance: null,options: {records: TestData,columns: [{field: 'group',title: '部门',width: 'auto',tree: true,fieldFormat (rec) {return rec['department'] || rec['group'] || rec['name'];}},{field: 'total_children',title: '成员数',width: 'auto',fieldFormat (rec) {if (rec['position']) {return `position:  ${rec['position']}`;} else return rec['total_children'];}},{field: 'monthly_expense',title: '每月支出',width: 'auto',fieldFormat (rec) {if (rec['salary']) {return `salary:  ${rec['salary']}`;} else return rec['monthly_expense'];}},{ field: 'new_hires_this_month', title: '本月新员工', width: 'auto' },{ field: 'resignations_this_month', title: '本月辞职数', width: 'auto' },{ field: 'complaints_and_suggestions', title: '收到投诉数', width: 'auto' }],widthMode: 'adaptive', // 宽度自适应// 内置主题，使用extends扩展样式theme: VTable.themes.DARK.extends({frameStyle: {cornerRadius: 0,borderLineDash: [5, 5]}})}}},mounted () {this.tableInstance = new VTable.ListTable(this.$refs['vtable'], this.options)}
}
</script>

        页面表格渲染效果如下图：

2.2 绘制成员图标

        在项目里创建icon.js文件，用于存储图片和图标的配置项。

2.2.1 svg图片

        代码如下：

<svg t="1741010020565" class="icon" viewBox="0 0 1252 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2645" width="32" height="32"><path d="M1250.816 928.085333c-27.363556-206.904889-177.891556-372.110222-371.484444-425.870222 79.758222-47.047111 133.916444-132.892444 133.916444-231.992889A270.563556 270.563556 0 0 0 743.025778 0a268.231111 268.231111 0 0 0-226.133334 124.188444A233.984 233.984 0 0 0 450.616889 113.777778a242.062222 242.062222 0 0 0-241.777778 241.777778c0 86.016 45.454222 161.166222 113.322667 204.003555-164.920889 49.436444-294.343111 190.919111-321.251556 367.445333-3.584 24.007111 3.527111 48.469333 19.456 66.958223 16.384 19.114667 40.277333 30.037333 65.592889 30.037333h657.066667a28.444444 28.444444 0 0 0 0-56.888889h-422.684445a28.444444 28.444444 0 0 1-21.560889-9.728 27.136 27.136 0 0 1-6.542222-21.845333c2.901333-22.016 7.964444-43.52 14.051556-64.625778a454.940444 454.940444 0 0 1 216.405333-272.725333A442.254222 442.254222 0 0 1 743.082667 540.444444c227.555556 0 421.603556 169.870222 451.413333 395.150223a26.908444 26.908444 0 0 1-6.599111 21.504 29.582222 29.582222 0 0 1-22.186667 10.012444h-81.351111a28.444444 28.444444 0 0 0 0 56.888889h81.351111c24.860444 0 48.526222-10.695111 64.910222-29.411556a84.195556 84.195556 0 0 0 20.195556-66.503111zM743.025778 56.888889c117.646222 0 213.333333 95.687111 213.333333 213.333333s-95.687111 213.333333-213.333333 213.333334A213.788444 213.788444 0 0 1 529.635556 270.222222c0-35.157333 8.419556-68.494222 25.144888-99.384889A212.48 212.48 0 0 1 743.025778 56.888889z m-477.297778 298.666667A185.116444 185.116444 0 0 1 490.382222 174.876444l-0.398222 1.422223a256.967111 256.967111 0 0 0-13.255111 50.517333c-2.332444 14.222222-3.982222 28.615111-3.982222 43.406222 0 11.434667 0.853333 22.755556 2.275555 33.962667 0.455111 3.640889 1.308444 7.168 1.934222 10.752 1.251556 7.509333 2.616889 14.961778 4.551112 22.300444 1.080889 4.096 2.446222 8.078222 3.697777 12.174223 2.048 6.656 4.266667 13.255111 6.826667 19.740444a285.468444 285.468444 0 0 0 14.392889 30.378667 265.216 265.216 0 0 0 18.147555 28.558222c2.503111 3.470222 4.949333 6.940444 7.623112 10.296889 4.551111 5.688889 9.443556 11.036444 14.392888 16.327111 2.730667 2.901333 5.233778 5.859556 8.078223 8.647111 6.030222 5.916444 12.515556 11.377778 19.171555 16.725333 2.218667 1.763556 4.152889 3.754667 6.428445 5.461334l0.853333 0.739555a184.547556 184.547556 0 0 1-130.503111 54.158222 185.116444 185.116444 0 0 1-184.888889-184.888888zM85.959111 967.111111a29.582222 29.582222 0 0 1-22.471111-10.183111 26.624 26.624 0 0 1-6.314667-21.333333c27.875556-182.897778 181.532444-323.185778 363.633778-337.066667-4.949333 3.982222-9.386667 8.476444-14.165333 12.629333-4.721778 4.152889-9.500444 8.248889-14.051556 12.572445a506.709333 506.709333 0 0 0-28.330666 29.127111c-3.185778 3.470222-6.542222 6.769778-9.614223 10.353778a517.176889 517.176889 0 0 0-33.223111 43.121777c-1.991111 2.901333-3.697778 6.030222-5.632 8.931556a503.864889 503.864889 0 0 0-22.641778 37.660444c-2.901333 5.347556-5.518222 10.865778-8.192 16.327112a544.426667 544.426667 0 0 0-22.357333 51.768888 500.053333 500.053333 0 0 0-11.605333 36.352c-1.536 5.518222-3.299556 10.922667-4.664889 16.497778a508.984889 508.984889 0 0 0-10.524445 54.328889c-0.853333 6.257778-0.853333 12.572444-0.284444 18.830222 0.170667 2.104889 0.796444 4.096 1.194667 6.200889 0.682667 4.152889 1.422222 8.248889 2.730666 12.231111 0.113778 0.512 0.113778 1.137778 0.341334 1.649778H85.959111z" p-id="2646" fill="#ffffff"></path><path d="M970.581333 967.111111h-113.777777a28.444444 28.444444 0 0 0 0 56.888889h113.777777a28.444444 28.444444 0 0 0 0-56.888889z" p-id="2647" fill="#ffffff"></path></svg>

2.2.2 配置项        

        在icon.js文件定义Svg图片，以及图标的配置项，通过export导出配置项。代码如下：

import * as VTable from '@visactor/vtable'/*** 成员svg头像*/
const iconMember = `<svg t="1741010020565" class="icon" 略...`/*** 创建头部成员头像* @returns img*/
export const memberHeaderIcon = (total) => {return {type: 'svg',svg: iconMember,width: 20,height: 20,bgColor: '#FFF',name: 'memberIcon',padding: [0, 10],// 设置显示位置（注意，此项不配置图标无法显示）positionType: VTable.TYPES.IconPosition.right,visibleTime: 'mouseenter_cell', // 显示时机， 'always' | 'mouseenter_cell' | 'click_cell'// 显示热区hover: {width: 26,height: 26,bgColor: 'rgba(22, 44, 66, .6)'},// 显示气泡弹框tooltip: {style: { arrowMark: false },title: '成员总数为' + total,placement: VTable.TYPES.Placement.right}}
}

 2.2.3 IconPosition 枚举      

         注意的是，在自定义图标时，必须要配置positionType类型，否则表格中无法显示。IconPosition 枚举类型，代码如下：

/*** icon 的位置* inlineFront:文本内容的前面，* inlineEnd：文本内容后面**/
export enum IconPosition {/**单元格左侧按钮 且受padding影响 */left = 'left',/**单元格右侧按钮 受padding影响 如pin图表 */right = 'right',/**固定在右侧的图标，不占位，不受padding影响，可能压盖内容 如 dropDown */absoluteRight = 'absoluteRight',/**在单元格内容块的左侧的图标，跟随文本定位，不随文本折行 */contentLeft = 'contentLeft',/**在单元格内容块的右侧的图标,跟随文本定位，不随文本折行 */contentRight = 'contentRight',/**在单元格中自由定位 */absolute = 'absolute',/**文本行内容前面的图标，跟随文本定位，随文本折行 */inlineFront = 'inlineFront',/**文本行内容后面的图标，跟随文本定位，随文本折行。如sort图表 放在文本内容的第一行 */inlineEnd = 'inlineEnd',
}

2.2.4 绘制headerIcon图标

        将memberHeaderIcon方法引入到页面中，通过reduce计算出当前列中总共成员数，将其传入通过tooltip气泡弹框显示出来。如下图：

        以上配置好后，当鼠标放到成员数列头上时，成员图标呈现出来，并且图标上出来热区样式，以及tooltop弹框信息。如下图：

三、单元格图标配置

        接下来，我们在“每月支出”列的行数据单元格中，添加钱袋子图标；而行数据中自定义图标，是通过icon配置项来完成的。

3.1 svg图

        代码如下：

<svg t="1741097153637" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5775" width="32" height="32"><path d="M802.898 440.753c-44.042-65.279-106.077-108.879-180.343-127.638 9.265 0.098 18.546-0.097 27.534-0.489 36.539-1.387 116.532-20.08 141.26 15.48 4.73 6.801 30.193-4.567 28.186-7.504-18.301-26.328-58.95-22.869-87.154-22.233-35.413 0.848-76.665 8.14-113.806 2.871 14.256-1.434 28.447-3.769 42.753-7.7 41.138-11.205 67.677-52.375 113.154-52.198 10.473 0.05 30.013-15.788 10.96-15.903-26.586-0.05-48.052 6.004-71.02 19.28-13.245 7.666-25.316 17.666-38.103 26.018-26.391 17.013-59.654 17.698-91.15 17.045 56.045-77.872 104.33-194.338 85.929-237.58-8.873-20.666-30.731-25.771-59.326-9.737-30.616 17.176-65.133 19.508-94.795 19.508-12.446 0-24.933-0.489-37.265-0.897-12.445-0.489-24.818-0.96-36.946-0.96-39.873 0-85.318 4.697-120.145 39.57-27.208 28.27-35.298 65.068-22.167 100.792 14.468 39.194 58.062 83.108 139.025 110.74-190.285 28.285-246.69 155.727-275.342 280.661-23.383 101.802-2.022 203.83 58.583 279.909C280.464 942.293 366.2 982.21 464.127 982.21c229.84 0 347.252-34.876 392.778-233.162 24.5-106.648 4.29-221.874-54.007-308.295zM442.75 87.28c11.744 0 23.765 0.406 35.877 0.847 12.715 0.524 25.519 0.948 38.332 0.948 19.143 0 41.685-1.011 64.653-6.38-14.519 8.615-28.84 18.337-42.819 28.01-67.669 46.422-121.146 83.09-187.446 0.488 26.056-20.685 59.129-23.913 91.403-23.913z m79.78 706.429l-0.032 52.572h-31.857v-50.55c-29.304-0.521-59.13-9.624-76.821-22.215l12.177-33.862c17.658 11.646 43.912 21.742 72.237 21.742 35.828 0 56.953-20.733 56.888-49.54 0-27.763-16.458-44.922-53.91-60.157-51.464-20.193-83.297-43.91-83.297-87.87 0-41.957 29.761-73.747 75.744-81.397v-50.549h31.856l-0.065 49.065c29.866 1.01 50.55 9.135 65.72 17.715l-12.657 33.34c-10.588-6.068-31.255-17.666-63.642-17.666-38.918 0-50.287 23.244-50.287 43.96 0 25.724 15.415 38.855 59.382 57.516 52.034 21.27 78.297 47.04 78.297 91.982 0.03 40.452-27.699 77.822-79.733 85.914z" p-id="5776" fill="#ffffff"></path></svg>

3.2 配置项

        还是在icon.js文件中，定义svg图标，以及图标的配置项。代码如下：

const iconDollar = `<svg t="1741097153637" class="icon"  //略...`/*** 邮箱图标*/
export const dollarIcon = () => {return {type: 'svg',svg: iconDollar,width: 20,height: 20,padding: [0, 10],name: 'dollarIcon',// 设置显示位置positionType: VTable.TYPES.IconPosition.right}
}

3.3 绘制icon图标

        同样方式，引入dollarIcon图标配置项，在每月支付列中，将dollarIcon赋值给icon。如下图：

        以上配置好后，页面表格中“每月支付”列中行数后面则会出现dollar图标。如下图：

3.4 全局自定义引入图标

        body 单元格图标配置，除了可以接受ColumnIconOption配置类型数据，也可以全局注册自定义图标，通过字符串名称进行引入。

icon?:| string| ColumnIconOption| (string | ColumnIconOption)[]| ((args: CellInfo) => string | ColumnIconOption | (string | ColumnIconOption)[]);

        在icon.js文件中，全局自定义钱袋子图标，然后在options配置项中的icon绑定即可。VTable.register.icon配置代码如下：

const iconDollar = `<svg t="1741097153637" class="icon"  //略...`// 全局自定义钱袋子图标
VTable.register.icon('customDollar', {ttype: 'svg',svg: iconDollar,width: 20,height: 20,padding: [0, 10],name: 'customDollar',positionType: VTable.TYPES.IconPosition.right
})

        在页面中，修改icon配置项，如下图：

        将之前配置项注释掉，更换为全局自定义图标name（customDollar），页面中依然可以显示钱袋图标，如下图：

四、自定义排序图标

       在上一篇（VisActor/VTable - 基本表格-CSDN博客）中，我们讲到了VTable排序功能，以及多种实现方式。在这里，将了解在VTable中，还可以通过自定义图标方式，更新或修改内置排序图标。

4.1 默认排序

        如下图，将后三列的sort设置为true，让其具有排序功能。

        如上配置完成后，表格的后三列会多出排序图标。如下图：

4.2 排序图标

        在自定义排序图标前，先准备好自己需要替换内置排序图标的三张图。如下图：

        示例，使用 VTable.register.icon 方法注册新的排序图标。这里需要确保 name 和 funcType 的配置正确。代码如下：

Table.register.icon("customSortIcon", {type: "svg",svg: "/path/to/your/sort.svg", // 替换为你的 SVG 图标路径width: 22,height: 22,name: "sort_normal",funcType: VTable.TYPES.IconFuncTypeEnum.sort,hover: {width: 22,height: 22,bgColor: "rgba(101, 117, 168, 0.1)",},cursor: "pointer",
});

 4.3 IconFuncTypeEnum 枚举

       IconFuncTypeEnum 枚举类型定义：

enum IconFuncTypeEnum {pin = 'pin',sort = 'sort',dropDown = 'dropDown',dropDownState = 'dropDownState',play = 'play',damagePic = 'damagePic',expand = 'expand',collapse = 'collapse',drillDown = 'drillDown',drillUp = 'drillUp'
}

4.4 全局注册新排序图标        

        具有切换状态的功能性的图标请务必配置上 funcType，例如排序功能 funcType 配置 sort，name 配置 sort_normal 或 sort_downward，或 sort_upward。这样才能准确替换到内部相应的 icon 图标。所以，在icon.js文件中全局替换掉排序的三种状态图标，代码如下：

// 定义生成自定义图标函数
const generateCustomIcon = (name, imgSrc) => {VTable.register.icon(name, {type: 'image',src: imgSrc,width: 15,height: 15,cursor: 'pointer',marginLeft: 10,hover: {width: 16,height: 16,bgColor: 'rgba(101, 117, 168, .1)'},name,funcType: VTable.TYPES.IconFuncTypeEnum.sort,positionType: VTable.TYPES.IconPosition.contentRight})
}generateCustomIcon('sort_normal', require('@/assets/img/sort.png'))
generateCustomIcon('sort_upward', require('@/assets/img/sort_down.png'))
generateCustomIcon('sort_downward', require('@/assets/img/sort_up.png'))

        由于icon.js已引入Vue页面，故无须再次引入，只需要在columns列数据中，配置好sort为true即可。当排序图标全局注册为新图标后，页面图标则自动更新为新图标。如下图：

五、自定义树形结构图标

        自定义树形结构的图标和自定义排序图标方式一样，需要通过全局注册的方式，覆盖内置图标。因此，也需要将collapse（树形结构折叠状态）和expand（树形结构展开状态），同时覆盖掉。

5.1 可重置内部图标

        在 VTable 中内置了几种关联内部功能的图标，如排序，固定列，下拉菜单图标，展开折叠图标等。可重置内部图标列表如下：

功能	配置 funcType	配置 name	图标描述
排序	VTable.TYPES.IconFuncTypeEnum.sort	"sort_normal"	排序功能图标 正常未排序状态
排序	VTable.TYPES.IconFuncTypeEnum.sort	"sort_upward"	排序功能图标 升序状态
排序	VTable.TYPES.IconFuncTypeEnum.sort	"sort_downward"	排序功能图标 降序状态
固定列	VTable.TYPES.IconFuncTypeEnum.frozen	"freeze"	固定列功能图标 可固定状态
固定列	VTable.TYPES.IconFuncTypeEnum.frozen	"frozen"	固定列功能图标 已固定状态
固定列	VTable.TYPES.IconFuncTypeEnum.frozen	"frozenCurrent"	固定列功能图标 被冻结当列
图片 or 视频地址失效	VTable.TYPES.IconFuncTypeEnum.damagePic	"damage_pic"	多媒体资源解析失败
树形结构折叠	VTable.TYPES.IconFuncTypeEnum.collapse	"collapse"	树形结构折叠状态
树形结构展开	VTable.TYPES.IconFuncTypeEnum.expand	"expand"	树形结构展开状态
树形结构折叠	VTable.TYPES.IconFuncTypeEnum.collapse	"collapse"	树形结构折叠状态
下拉菜单	VTable.TYPES.IconFuncTypeEnum.dropDown	"downward"	下拉图标正常状态
下拉菜单	VTable.TYPES.IconFuncTypeEnum.dropDown	"downward_hover"	下拉图标 hover 状态
行拖拽	VTable.TYPES.IconFuncTypeEnum.dragReorder	"dragReorder"	拖拽行顺序，配置了 rowSeriesNumber 时可见

5.2 svg图标

        收缩图标如下：

<svg t="1741129177285" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8847" width="32" height="32"><path d="M970.666667 213.333333H542.173333L429.793333 100.953333A52.986667 52.986667 0 0 0 392.08 85.333333H96a53.393333 53.393333 0 0 0-53.333333 53.333334v704a53.393333 53.393333 0 0 0 53.333333 53.333333h874.666667a53.393333 53.393333 0 0 0 53.333333-53.333333V266.666667a53.393333 53.393333 0 0 0-53.333333-53.333334zM96 128h296.08a10.573333 10.573333 0 0 1 7.54 3.126667L481.826667 213.333333H96a53.546667 53.546667 0 0 0-10.666667 1.073334V138.666667a10.666667 10.666667 0 0 1 10.666667-10.666667z" fill="#ffffff" p-id="8848"></path></svg>

        展开图标如下：

<svg t="1741129240171" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9057" width="32" height="32"><path d="M120 344h291.6l112-112H736v224h56V176H500.4l-112 112H64v560l56-130.6z" fill="#ffffff" p-id="9058"></path><path d="M792 456H232L120 717.4 64 848h728l168-392z" fill="#ffffff" p-id="9059"></path></svg>`

const iconFile = `<svg t="1741129270830" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9268" width="32" height="32"><path d="M512 128c-28.2368 0-51.2-22.9632-51.2-51.2s22.9632-51.2 51.2-51.2 51.2 22.9632 51.2 51.2-22.9632 51.2-51.2 51.2z m0-76.8c-14.1184 0-25.6 11.4816-25.6 25.6s11.4816 25.6 25.6 25.6 25.6-11.4816 25.6-25.6-11.4816-25.6-25.6-25.6z" fill="#ffffff" p-id="9269"></path><path d="M588.8 230.4H435.2a12.8 12.8 0 0 1-12.8-12.8V115.2a12.8 12.8 0 0 1 12.8-12.8h153.6a12.8 12.8 0 0 1 12.8 12.8v102.4a12.8 12.8 0 0 1-12.8 12.8z m-140.8-25.6h128v-76.8H448v76.8zM768 307.2h25.6v25.6h-25.6zM281.6 499.2h25.6v25.6h-25.6zM345.6 268.8h332.8v25.6H345.6zM345.6 652.8h332.8v25.6H345.6zM499.2 588.8h179.2v25.6H499.2zM448 588.8h25.6v25.6h-25.6zM345.6 588.8h76.8v25.6h-76.8zM345.6 524.8h332.8v25.6H345.6zM345.6 460.8h332.8v25.6H345.6zM345.6 396.8h332.8v25.6H345.6zM601.6 332.8h76.8v25.6h-76.8zM550.4 332.8h25.6v25.6h-25.6zM345.6 332.8h179.2v25.6H345.6z" fill="#ffffff" p-id="9270"></path><path d="M793.6 281.6h-25.6v-115.2a12.8 12.8 0 0 0-12.8-12.8H588.8v-25.6h166.4c21.1712 0 38.4 17.2288 38.4 38.4v115.2zM755.2 793.6H268.8c-21.1712 0-38.4-17.2288-38.4-38.4V166.4c0-21.1712 17.2288-38.4 38.4-38.4h166.4v25.6H268.8a12.8 12.8 0 0 0-12.8 12.8v588.8a12.8 12.8 0 0 0 12.8 12.8h486.4a12.8 12.8 0 0 0 12.8-12.8V358.4h25.6v396.8c0 21.1712-17.2288 38.4-38.4 38.4z" fill="#ffffff" p-id="9271"></path><path d="M729.6 742.4H294.4a12.8 12.8 0 0 1-12.8-12.8V550.4h25.6v166.4h409.6V204.8H588.8v-25.6h140.8a12.8 12.8 0 0 1 12.8 12.8v537.6a12.8 12.8 0 0 1-12.8 12.8zM307.2 473.6h-25.6V192a12.8 12.8 0 0 1 12.8-12.8h140.8v25.6H307.2v268.8zM473.6 153.6h76.8v25.6h-76.8z" fill="#ffffff" p-id="9272"></path></svg>

5.3 全局注册树形结构图标

        打开icon.js文件，使用Table.register.icon全局注册方式，将collapse（树形结构折叠状态）和expand（树形结构展开状态）的图标重置。代码如下：

const iconFolder = `<svg t="1741129177285" class="icon" // 略...`
const iconFolderOpen = `<svg t="1741129240171" class="icon" viewBox="0 0 // 略...`// 定义生成自定义图标函数
const generateCustomTreeIcon = (name, imgSrc, _type) => {VTable.register.icon(name, {type: 'svg',svg: imgSrc,width: 15,height: 15,cursor: 'pointer',marginRight: 10,hover: {width: 16,height: 16,bgColor: 'rgba(101, 117, 168, .1)'},name,funcType: _type,positionType: VTable.TYPES.IconPosition.contentLeft})
}
// 全局配置替换内置的树形结构的展开/收缩图标
generateCustomTreeIcon('expand', iconFolderOpen, VTable.TYPES.IconFuncTypeEnum.expand)
generateCustomTreeIcon('collapse', iconFolder, VTable.TYPES.IconFuncTypeEnum.collapse)

        重置内置树结构收缩/展开图标后，原来的三角图标则消失，由新的文件夹图标所替换。如下图：

5.4 用户头像图标配置

        在“三、单元格图标配置”中，我们已经了解到icon可配置为string或ColumnIconOption配置项类型；如果，想在用户名称前增加用户头像图标，则须使用到icon的第三种：函数配置类型 (args: CellInfo) => string。

        在icon.js中，定义fileIcon函数，通过列和行索引获取当前行数据，并判断当前行数据中，如不存在子项（则为用户行数据），在该行用户名称前增加头像图标。代码如下：

const iconFile = `<svg t="1741180868390" class="icon" // 略...`// 配置子项无children的图标
export const fileIcon = (args) => {const { row, col, table } = argsconst rowData = table.getCellOriginRecord(col, row); // 获取单元格行数据// 如果有子项，则不渲染图片if (Array.isArray(rowData['children'])) {return null}return {type: 'svg',svg: iconFile,width: 20,height: 20,marginRight: 10,name: 'customUserIcon',// 设置显示位置positionType: VTable.TYPES.IconPosition.contentLeft}
}

        在Vue页面中，引入fileIcon函数，绑定icon图标。如下图：

        页面效果如下图：

七、监听图标点击事件

        在VTable中，可以通过监听 icon_click 事件来处理图标的点击逻辑，在函数中可获取单元格名称以及表格行数据。

7.1 定义事件

        在VTable实例对象中，使用on方法定义图标点击监听事件。代码如下：

mounted () {this.tableInstance = new VTable.ListTable(this.$refs['vtable'], this.options)// 添加图标点击事件this.tableInstance.on('icon_click', (params) => {console.log('params', params)})
}

        此时，我们点击用户头像图标 和 钱袋图标，查看控制台输出信息。如下图：

7.2 更新图标

        如控制台输出信息可见，可通过自定义图标name判断，对各个自定义图标进行调整。接下来，作以下调整，点击头像图标，更新图标的颜色，进行交替显示。

        白色头像图标：

<svg t="1741180868390" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17778" width="32" height="32"><path d="M392.704 534.4a192 192 0 1 1 239.104-0.384A335.68 335.68 0 0 1 801.216 679.36a32 32 0 0 1-55.296 32.256C696.256 626.688 608.832 576 512 576s-184.32 50.688-233.92 135.68a32 32 0 1 1-55.232-32.256A339.008 339.008 0 0 1 392.704 534.4zM512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m0-64a448 448 0 1 0 0-896 448 448 0 0 0 0 896z m0-448a128 128 0 1 0 0-256 128 128 0 0 0 0 256z" p-id="17779" fill="#ffffff"></path></svg>

        红色头像图标：

<svg t="1741180868390" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="17778" width="32" height="32"><path d="M392.704 534.4a192 192 0 1 1 239.104-0.384A335.68 335.68 0 0 1 801.216 679.36a32 32 0 0 1-55.296 32.256C696.256 626.688 608.832 576 512 576s-184.32 50.688-233.92 135.68a32 32 0 1 1-55.232-32.256A339.008 339.008 0 0 1 392.704 534.4zM512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m0-64a448 448 0 1 0 0-896 448 448 0 0 0 0 896z m0-448a128 128 0 1 0 0-256 128 128 0 0 0 0 256z" p-id="17779" fill="#d81e06"></path></svg>

        如下图，当点击图标时，判断为自定义图标customUserIcon时，更替头像图标。

        点击其中一个头像图标，效果如下：

        通过以上步骤，可以实现 VTable 中自定义图标的自定义和更新，以及内置图标的修改或重置。