reactjs - AntD 表列在其值中不呈现前导或尾随空格
问题描述
我在 AntD 表中显示数据库中的值,该值可以以空格开头或结尾,并且空格不会被呈现。我已经分叉了一个简单的表格示例来显示问题:
https://codesandbox.io/s/agitated-frog-obmh1
让 AntD 停止修剪值中多余空格的正确方法是什么?
我为后代包含了以下代码:
import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Table } from 'antd';
const columns = [
{
title: 'Name',
dataIndex: 'name',
filters: [
{
text: 'Joe',
value: 'Joe',
},
{
text: 'Jim',
value: 'Jim',
},
{
text: 'Submenu',
value: 'Submenu',
children: [
{
text: 'Green',
value: 'Green',
},
{
text: 'Black',
value: 'Black',
},
],
},
],
// specify the condition of filtering result
// here is that finding the name started with `value`
onFilter: (value, record) => record.name.indexOf(value) === 0,
sorter: (a, b) => a.name.length - b.name.length,
sortDirections: ['descend'],
},
{
title: 'Age',
dataIndex: 'age',
defaultSortOrder: 'descend',
sorter: (a, b) => a.age - b.age,
},
{
title: 'Address',
dataIndex: 'address',
filters: [
{
text: 'London',
value: 'London',
},
{
text: 'New York',
value: 'New York',
},
],
filterMultiple: false,
onFilter: (value, record) => record.address.indexOf(value) === 0,
sorter: (a, b) => a.address.length - b.address.length,
sortDirections: ['descend', 'ascend'],
},
];
const data = [
{
key: '1',
name: ' John Brown ', // WHITESPACE ADDED HERE
age: 32,
address: ' New York No. 1 Lake Park ', // WHITESPACE ADDED HERE
},
{
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',
},
];
function onChange(pagination, filters, sorter, extra) {
console.log('params', pagination, filters, sorter, extra);
}
ReactDOM.render(<Table columns={columns} dataSource={data} onChange={onChange} />, document.getElementById('container'));
解决方案
似乎没有停止修剪的选项。但是,您可以将空格 (\u0020) 替换为 (\u00a0) 以获得相同的视图:
const data = [{
key: '1',
name: '\u00a0\u00a0\u00a0\u00a0\u00a0John Brown\u00a0\u00a0\u00a0\u00a0',
age: 32,
address: 'London No. 2 Lake Park'
}]
推荐阅读
- python - 使用 Pandas 滚动时如何忽略 NaN
- java - 保护包名称免受攻击
- android - 如何确定哪个属性会更改 AlertDialog 内弹出菜单的文本颜色?
- php - 如何使用 php 版本 8 安装 laravel 7
- visual-studio - VS2019 给了我这个:未解析的外部符号 _main 在函数“int __cdecl invoke_main(void)”(?invoke_main@@YAHXZ) 中引用
- azure - Azure SQL 数据库从 Azure 标准订阅转移到开发/测试订阅
- python - 带有数据库数据的 Django 动态 URL
- database - 在 Joomla 域上运行 WP 子文件夹
- c# - 如何使用 Windows 身份验证在 ASP.NET Core 5 中操作声明
- python - 即使提供了超时,Python 请求模块也会卡住很长时间