取消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)
}
}
}}
/>