antd vue 的table组件rowSelection会多处一列选择框 选择框的表头怎么改背景色
时间: 2024-05-12 14:14:32 浏览: 155
改变选择table行的背景色
5星 · 资源好评率100%
如果你要改变选择框表头的背景色,可以通过以下步骤来实现:
1. 首先,在 `columns` 中添加一列需要选择的列,如下所示:
```javascript
const columns = [
{
title: 'Name',
dataIndex: 'name',
},
{
title: 'Age',
dataIndex: 'age',
},
{
title: 'Address',
dataIndex: 'address',
},
{
title: 'Selection',
dataIndex: 'selection',
width: '100px',
render: (text, record, index) => {
return <Checkbox onChange={() => handleSelectChange(record)} />;
},
},
];
```
2. 在 `Table` 组件中添加 `rowSelection` 属性和 `columns` 属性,如下所示:
```javascript
<Table
columns={columns}
dataSource={dataSource}
rowSelection={{
type: 'checkbox',
selectedRowKeys: selectedKeys,
onChange: handleRowSelected,
}}
/>
```
3. 在 CSS 样式中添加以下样式:
```css
.ant-table-thead > tr > th:last-child {
background-color: #f0f0f0;
}
```
这样,选择框表头的背景色就会变成灰色。你可以根据自己的需求修改背景色的颜色值。
阅读全文