antd选中table不变色

要让 Ant Design 的 Table 组件在选中行时不变色，可以使用 CSS 样式来实现。可以通过设置 `!important` 来覆盖默认的样式，例如：

.ant-table-row:hover {
  background-color: transparent !important;
}

.ant-table-row-selected {
  background-color: transparent !important;
}

这样设置后，当鼠标悬浮在表格行上时，不会出现背景色；当选中表格行时，也不会出现背景色。

相关问题

antd获取table中checkbox选中的值

可以通过antd的`Table`组件中的`rowSelection`属性来实现多选和单选功能，并通过`selectedRowKeys`属性来获取当前选中的行的key值。

具体实现步骤如下:

1. 在`<Table>`组件中添加`rowSelection`属性，设置`type`为`checkbox`表示启用多选功能。

<Table
  rowSelection={{
    type: "checkbox",
    onChange: this.onSelectChange,
    selectedRowKeys: this.state.selectedRowKeys
  }}
  columns={columns}
  dataSource={data}
/>

2. 在`<Table>`组件中添加`onChange`事件处理函数`onSelectChange`。

onSelectChange = (selectedRowKeys, selectedRows) => {
  this.setState({ selectedRowKeys });
};

3. 在`render()`函数中获取当前选中行的key值。

const { selectedRowKeys } = this.state;

完整示例代码如下:

import React from "react";
import ReactDOM from "react-dom";
import { Table } from "antd";

const columns = [
  {
    title: "Name",
    dataIndex: "name"
  },
  {
    title: "Age",
    dataIndex: "age"
  },
  {
    title: "Address",
    dataIndex: "address"
  }
];

const data = [
  {
    key: "1",
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park"
  },
  {
    key: "2",
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park"
  },
  {
    key: "3",
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park"
  },
  {
    key: "4",
    name: "Jim Red",
    age: 32,
    address: "London No. 2 Lake Park"
  }
];

class App extends React.Component {
  state = {
    selectedRowKeys: []
  };

  onSelectChange = (selectedRowKeys, selectedRows) => {
    this.setState({ selectedRowKeys });
  };

  render() {
    const { selectedRowKeys } = this.state;
    const rowSelection = {
      type: "checkbox",
      onChange: this.onSelectChange,
      selectedRowKeys
    };
    return (
      <Table
        rowSelection={rowSelection}
        columns={columns}
        dataSource={data}
      />
    );
  }
}

ReactDOM.render(<App />, document.getElementById("container"));

antd table 从属关系_antd3.0 table新增的components属性如何使用

`antd` 3.0 版本新增的 `components` 属性可以用来自定义表格的组件，其中包括 `header`、`body`、`footer` 等部分的组件。

例如，我们可以自定义表格的 `body` 部分的 `row` 组件，如下所示：

import { Table } from 'antd';

const components = {
  body: {
    row: CustomRow,
  },
};

function CustomRow(props) {
  return (
    <tr className="custom-row" onClick={() => console.log(props)}>
      {props.children}
    </tr>
  );
}

function MyTable(props) {
  return <Table {...props} components={components} />;
}

在上面的代码中，我们定义了一个 `CustomRow` 组件来自定义表格的 `body` 部分的 `row` 组件。然后，我们将这个组件作为 `components` 属性的 `body.row` 属性值传递给 `Table` 组件。

这样，在渲染表格时就会使用我们自定义的 `CustomRow` 组件来渲染表格的行。如果需要自定义其他部分的组件，也可以在 `components` 对象中添加相应的属性。