Antd-vue中table组件的customCell用法

最新推荐文章于 2024-09-23 11:09:04 发布

Yokattasama

最新推荐文章于 2024-09-23 11:09:04 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.csdn.net/Yokattasama/article/details/114372195

本文详细介绍了Antd-vue框架中表格组件的使用方法，特别是如何利用customCell属性来增强单元格交互功能，包括鼠标悬停时的事件监听等。

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

Antd-vue中table组件的customCell用法

// ...
data() {
	return {
		//...
		columns: [
			//...
			{
	          title: '列标题',
	          dataIndex: 'columnTitle',
	          scopedSlots: {
	            customRender: 'columnTitle',
	          },
	          customCell: (record)=> {
	            return {
	              on: {
	                mouseenter: (event)=>{
	                  console.log('进入了鼠标指向的单元格')
	                  console.log('事件对象', event)
	                  console.log('当前行数据', record)                 
	                },
	                mouseleave: (event)=>{
	                  console.log('离开当前单元格')
	                }
	              }
	            }
	          },
	        },
		]
	}
}