antd table选中行得颜色
时间: 2023-10-06 09:05:59 浏览: 85
Ant Design的Table组件默认提供了选中行的样式,选中行的背景色为蓝色。如果需要修改选中行的样式,可以通过CSS进行修改。
例如,将选中行的背景色修改为灰色,可以添加如下的CSS代码:
```
.ant-table-row-selected {
background-color: #f5f5f5;
}
```
其中,`.ant-table-row-selected`是选中行的class,`background-color`属性设置选中行的背景色。你可以根据需要修改背景色的值。
相关问题
antd table 删除行
要删除 antd table 中的某一行,可以按照以下步骤操作:
1. 通过 `rowSelection` 属性设置行选择器,例如:
```
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log('selectedRowKeys:', selectedRowKeys);
console.log('selectedRows:', selectedRows);
},
};
<Table rowSelection={rowSelection} dataSource={data} columns={columns} />;
```
2. 在 `onChange` 函数中处理选中的行,例如:
```
const rowSelection = {
onChange: (selectedRowKeys, selectedRows) => {
console.log('selectedRowKeys:', selectedRowKeys);
console.log('selectedRows:', selectedRows);
setSelectedRows(selectedRows);
},
};
```
这里通过 `setSelectedRows` 函数将选中的行保存到状态中。
3. 添加删除按钮,在按钮的 `onClick` 函数中删除选中的行,例如:
```
const handleDeleteRows = () => {
setData(data.filter(item => !selectedRows.includes(item)));
setSelectedRows([]);
};
<Button onClick={handleDeleteRows}>删除行</Button>;
```
这里通过 `setData` 函数更新数据源,`filter` 函数将选中的行过滤掉,`setSelectedRows` 函数清空选中的行。
antd table 编辑行
可以通过 `antd` 的 `Table` 组件的 `editable` 和 `onSave` 两个属性来实现编辑行的功能。
首先,需要在 `Table` 组件中设置 `editable` 属性为 `true`,来开启编辑行的功能:
```jsx
<Table
dataSource={dataSource}
columns={columns}
rowKey="id"
editable={{
type: 'single',
onSave: handleSave,
}}
/>
```
其中,`type` 属性可以设置为 `single` 或 `multiple`,分别表示单行编辑和多行编辑。
然后,需要在 `Table` 组件中设置 `onSave` 属性,来处理保存编辑行的逻辑:
```jsx
const handleSave = async (rowKey, rowData) => {
const newData = [...dataSource];
const index = newData.findIndex((item) => rowKey === item.id);
const item = newData[index];
newData.splice(index, 1, { ...item, ...rowData });
setDataSource(newData);
};
```
在上述代码中,我们首先复制原来的数据源 `dataSource`,然后找到要编辑的行在数据源中的位置 `index`,将编辑后的数据 `rowData` 合并到该行数据 `item` 中,最后用更新后的数据源更新 `Table` 组件。
完整代码如下:
```jsx
import { Table } from 'antd';
const columns = [
{
title: 'ID',
dataIndex: 'id',
},
{
title: 'Name',
dataIndex: 'name',
editable: true,
},
{
title: 'Age',
dataIndex: 'age',
editable: true,
},
];
const dataSource = [
{
id: '1',
name: 'John Brown',
age: 32,
},
{
id: '2',
name: 'Jim Green',
age: 42,
},
{
id: '3',
name: 'Joe Black',
age: 23,
},
];
const App = () => {
const [dataSource, setDataSource] = useState(dataSource);
const handleSave = async (rowKey, rowData) => {
const newData = [...dataSource];
const index = newData.findIndex((item) => rowKey === item.id);
const item = newData[index];
newData.splice(index, 1, { ...item, ...rowData });
setDataSource(newData);
};
return (
<Table
dataSource={dataSource}
columns={columns}
rowKey="id"
editable={{
type: 'single',
onSave: handleSave,
}}
/>
);
};
export default App;
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)