Antd表格鼠标悬浮某一行显示操作按钮

最新推荐文章于 2024-06-09 11:34:16 发布

不好意思高到你

最新推荐文章于 2024-06-09 11:34:16 发布

阅读量987

点赞数

文章标签：前端 javascript react.js Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_40476977/article/details/129589447

版权

框架：React

UI：antd

import { useEffect, useState } from "react"
import type { ColumnsType } from 'antd/es/table'
import { EditOutlined, MinusCircleOutlined, InfoCircleOutlined } from '@ant-design/icons'

interface DataType {
  user_name: string
  user_role: number
}

export default function Table() {
  const [showIcon, setShowIcon] = useState(false)
  const [iconIndex, setIconIndex] = useState(-1)

  const columns: ColumnsType<DataType> = [
    {
      title: 'Name',
      dataIndex: 'user_name',
      render: (user_name, record, index) => (
        <Space>
          <span>{user_name}</span>
          <InfoCircleOutlined style={{ visibility: showIcon && index == iconIndex ? 'visible' : 'hidden' }} onClick={() => toDetailModal(user_name)} />
        </Space>
      )
    },
    {
      title: 'Role',
      dataIndex: 'user_role',
      render: (user_role, record, index) => (
        <Space>
          <span>{user_role === 0 ? 'Admin' : 'Viewer'}</span>
          <EditOutlined style={{ visibility: showIcon && index == iconIndex ? 'visible' : 'hidden' }} onClick={() => handleRoleUpdate(record)} />
        </Space>
      )
    },
    {
      title: '',
      key: 'action',
      width: 200,
      render: (_, record) => (
        <MinusCircleOutlined onClick={() => handleDelete(record)} />
      ),
    },
  ]

  const hoverRow = (record: any, index: any) => {
    setShowIcon(true)
    setIconIndex(index)
}
  return (<Table
          onRow={(record, index) => {
            return {
              onMouseEnter: () => { hoverRow(record, index) },
              onMouseLeave: () => setShowIcon(false),
            }
          }}
          columns={columns}
          dataSource={yourDataSource} />)
}