Ant Design of Vue 之table表格实现头部自定图标


背景

vue项目要基于ant vue 组件库,实现如下如效果。
image.png

实现过程

主要通过scopedSlots或者slots配置自定义头部,具体看代码:

<a-table :columns="tableColumn" :data-source="tableData">
	<span slot="customName">
     <img src="../../assets/images/1.png" alt="">//我这边是导入图片,也放入svg,或者自定义icon
				区分
  </span>
</a-table>
------------------------------------------------------------------------------------------
const tableColumn = [{
		//一定要去掉title,要不然无法实现自定义样式
		dataIndex: 'name',
		key: 'name',
		align: 'center',
		slots: { title: 'customName'},//或者scopedSlots: { title: 'customEle' },
}]

参考

  1. vue ant design a-table表格标题(title)添加icon样式


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM