本篇文章主要记录在使用antd组件时,遇到的几个小问题,特此记录,同时也想强调下仔细查看官方文档真的很重要哦!
本篇记录的问题分别是:
- table组件排序时去除“取消排序”选项
- table组件本地排序按字段值首字母排序
- modal组件设置是否可见属性报红
Ant Design的Table组件去除“取消排序”选项
当我们像官方文档demo中这样设置sortDirections: ['descend']时,会发现点击排序时会有三种状态:点击升序、点击降序、取消排序。而当我们只需要升序和降序,不需要取消排序时,我们可以这样做:
sortDirections:['ascend', 'descend', 'ascend']
在我解决这个问题的过程中,也在百度中搜索了下,千篇一律而且比较复杂的方法劝退了我。我就继续回到官方文档,找到了这个答案。摘自官网 ↓
Ant Design的table组件按字段值首字母排序
当我们需要本地对类似name的字段进行排序时,可以使用localeCompare这个方法:
sorter: (a, b) => a.name.localeCompare(b.name)
了解更多戳这里 localeCompare
Ant Design的modal组件设置是否可见属性报红
这个问题主要是提醒我,在看官方文档时,要先确认下项目中使用的版本和所阅读的官方文档的版本是否一致,不同版本,一些属性的使用会有一些变化。如果你也遇到这种问题,多半就是这个原因了:
在最新的文档4.23.0版本中,设置modal组件是否可见属性改名了,由原来的visible改为了open。
好啦,本篇就记录到这儿。起来运动一哈吧~