取消antd中Table组件的默认效果,双击每个子元素可发事件

CSS部分代码:

:global(.ant-table-body) {
min-height: 150px !important;//设置整个表格的最小高度
}

:global(.ant-table-wrapper) {
border: 1px solid #f0f0f0;
}

:global(.ant-empty-normal) {
display: none;//默认空表格不显示任何内容
}

:global {//设置每行每个单元格的样式
.ant-table-cell {
border-bottom: 0 !important;
font-size: 12px;
padding: 5px 0 0 5px !important;
}
.ant-table-row {
cursor: default !important;//鼠标滑过每行的时候的状态
}
}

html部分代码:

<Table
pagination={false}
bordered={false}
size="small"
columns={columns}
dataSource={listData}
scroll={{ y: 150 }}
onRow={(item, index) => {
return {
onDoubleClick: () => {
//双击每行时候的事件
index !== undefined && doubleHandler(item)
},

//单击每行时的事件
onClick: () => {
click(item)
}
}
}}
/>

 

posted on 2024-01-25 21:15  破晓以后  阅读(76)  评论(0编辑  收藏  举报