问答

关于defaultSortOrder或sortOrder降序问题,切换数据后就失效 an

作者:admin 2021-04-09 我要评论

页面刷新初始化正常,一旦下拉切换age选项数据的话,降序就失效,怎样每次切换下拉数据不影响降序呢 antd Table columns降序问题 const { Table, Button,Select ...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

页面刷新初始化正常,一旦下拉切换age选项数据的话,降序就失效,怎样每次切换下拉数据不影响降序呢

image

antd Table columns降序问题

const {  Table, Button,Select  } = antd;
const { Option } = Select;
const title = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    defaultSortOrder: 'descend',
    sorter: (a,b)=>a.age-b.age,
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    age2: 12,
    age3: 2,
    age4: 52,
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    age2: 2,
    age3: 12,
    age4: 22,
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 12,
    age2: 62,
    age3: 31,
    age4: 31,
  },
];

class App extends React.Component {
  state = {
    age: 'age',
    columns:title,
  };
  
  onChageAge = age => {
    const {columns} = this.state;
    console.log(age,'=age');
    columns[1].dataIndex = age;
    //columns[1].sortOrder = 'descend',
    columns[1].sorter = (a,b)=>a[age]-b[age],
    this.setState({age,columns});
  };

  render() {
    const {columns} = this.state;
    return (
      <div>
        <Select
         value={this.state.age}
         onChange={this.onChageAge}
         style={{ width: 200 }}
        >
           <Option value='age'>age</Option>
           <Option value='age2'>age2</Option>
           <Option value='age3'>age3</Option>
           <Option value='age4'>age4</Option>
        </Select>
        <Table columns={columns} dataSource={data} />
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器