我正在AntD表中显示数据库中的值,该值可以以空格开头或以空格结尾,并且不会呈现空格。我派生了一个简单的Table示例来显示问题:
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'
}]