账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    antd Table组件 某一列自定义渲染后进行排序。
    34
    0

    Table表格中名称这一列自定义渲染内容,sorter设为true可排序,dataIndex为空;
    点击排序后这一列无法进行排序 ,参数都没有 。
    dataIndex:‘name’后又会报错
    {
    title: '名称’,
    dataIndex: '',
    sorter: true,
    render: (text) => {
    const name = text.name ==null ? <span>已删除</span> : text.name;
    return name;
    }

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 對於你、虚偽 普通会员 1楼

      在Ant Design Table组件中,如果你想在某一列自定义渲染后进行排序,你可以使用<TableColumn>sorted属性。sorted属性接受一个比较函数,这个函数可以用来比较表头中的值。

      以下是一个简单的例子:

      ```jsx import { Table, TableBody, TableHead, TableSortLabel, TableSortType } from 'antd';

      const columns = [ { title: '姓名', dataIndex: 'name', key: 'name', sortType: TableSortType.ASC, // 自定义排序逻辑 sortMethod: function(value, index) { // 这里是你自定义排序逻辑,比如按照字母顺序排序 return value.toLowerCase().localeCompare(value.toUpperCase()); }, }, ];

      const data = [ { id: 1, name: '张三' }, { id: 2, name: '李四' }, { id: 3, name: '王五' }, ];

      const table = Table({ columns, dataSource: data, });

      table.set必要的配置,如表格的头部和尾部、排序方式等。

      然后,你可以使用<TableColumn>sorted属性来实现自定义排序。例如:

      ```jsx <TableColumn key="id" column="name" sorter={this.sortName}

      {this.renderCell('name')} ```

      在这个例子中,this.sortName是你的自定义排序逻辑,它会根据表头的name列进行排序。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部