使用ant vue遇到的一点问题总结

table中的排序

在column数据设置，需要开启的列设置sorter: (a, b) => a.size- b.size, 自定义排序方法

{ title: '数据大小(单位/KB)', 
	ellipsis: true, 
	align: 'center', 
	dataIndex: 'size',
  	sorter: (a, b) => a.size - b.size,//自定义排序
    sortDirections: ["descend","ascend"],//先降序后升序
 },

ant design vue 表格排序，默认点击排序顺序是[升序，降序，不排序] 如此循环
如果要设置先降序后排序
可以在column的每一项设置sortDirections: [‘descend’, ‘ascend’]
官方是 [‘descend’ | ‘ascend’] 这种写法，后来发现不行，需要用 [“descend”,“ascend”]
上面是一般数据的比较，还有时间数据，因为格式问题，就需要转换时间戳

createTime: "2021-04-15 15:54:54"

new Date(aTimeString).getTime()

然后用转换后的数据比较排序

{
   title: '上传时间',
   ellipsis: true,
   align: 'center',
   dataIndex: 'createTime',
   sorter: (a, b) => {
   		let aTimeString = a.createTime
 	  	let bTimeString = b.createTime
  	 	let aTime = new Date(aTimeString).getTime()
  	 	let bTime = new Date(bTimeString).getTime()
   return bTime - aTime
   },
},

另外还有一个坑，上面写的排序都是前端自己写的排序，只是对一页数据做了排序，但是一般表格不会只有一页，数据过多，就需要后端来做排序。
以下是需要后端排序的写法

{
          title: '上传时间',
          ellipsis: true,
          align: 'center',
          dataIndex: 'createTime',
          sorter: true,
        },

首先sorter设为true，然后在表格的change时间写请求

tableChange(pagination, filters, sorter) {
      if (Object.keys(sorter).length > 0) {
        this.order = "ascend" == sorter.order ? "asc" : "desc"
      }
      this.filters = filters
      this.ipagination = pagination
      this.loadData()
    },

tbale的筛选

看官方介绍
使用列的 filters 属性来指定需要筛选菜单的列，onFilter 用于筛选当前数据，filterMultiple 用于指定多选和单选

{
 title: '发布状态',
 ellipsis: true,
 align: 'center',
 dataIndex: 'status',
 key:'status',
 filters: [
 	//text是展示项，value是绑定值
    { text: '待发布', value: 0 },
    { text: '已发布', value: 1 },
          ],
 onFilter: (value, record) => record.status.toString().indexOf(value.toString()) === 0,
 scopedSlots: { customRender: 'status' },
        },

<a-table class="dataTable" :pagination="ipagination" :columns="columns" :data-source="data" bordered rowKey='id' @change="tableChange">

tableChange(pagination, filters, sorter) {
      console.log(filters)//filters是筛选的选中值
      
    },

antd radio设置默认选中_Antd—单选框Radio的关于defaultValue的坑

感觉这个defaultValue非常坑，刚开始用的是它，在子组件里给它设置的是父组件传过来的值，结果无论如何都出不来，而给的是固定值就可以出来，以为是页面周期的问题，又在setTimeout里写了，还是出不来，后来写个方法改变defaultValue的值还是不行

这下就知道原因了，defaultValue的值不会根据状态变化来变化，官网还有一个value，直接丢掉defaultValue

持续更新