将这个蓝色的小三角置灰,并且数据恢复排序之前的样子。不知antd vue中有没有方法可以调用,希望做过类似功能的大神能够提供一条思路!
在单击它不就可以了么? 默认就是 (升序,降序,默认顺序.) 3个.
客户在点页面时提出来的,发现点击完重置按钮,这个排序还保持原来的样子,没有被重置。所以提出点击重置按钮,这个要变成默认排序
@滴水不漏dayday: column 有属性 sortOrder
重置的时候给它赋值应该可以.
@czd890: 赋值null?
@滴水不漏dayday:
文档是这样写的.
sortOrder Order of sorted values: 'ascend' 'descend' false boolean|string
@czd890: 文档地址可以提供一下吗
现成的:
Reset filters and sorters #
Control filters and sorters by filteredValue and sortOrder.
Defining filteredValue or sortOrder means that it is in the controlled mode.
Make sure sortOrder is assigned for only one column.
column.key is required.
https://www.antdv.com/components/table/#components-table-demo-reset-filters-and-sorters
@czd890: 看来我们参考的文档是一样的,我参考他底下的原码做了一下,一直提示sortedInfo 这个是未定义的,不太清楚问题出现在哪里。我的代码和源码的区别在于,他的columns声明在computed函数中,而我的声明在<script>标签中了,不知是不是这个导致的未定义
@滴水不漏dayday: 你的这个截图里面, 我也没有看到sortedInfo在哪里定义呀
@czd890: 在data域中定义了一下 另外他的这一部分代码,没看懂作用是什么,大神帮着瞧一眼
@滴水不漏dayday:
可以这样:
const sortedInfo={};
const columns={...}
data(){
return {
sortedInfo
columns
}
}
let {a,b}=this. 简单说就是从this里面提取a和b2个字段.
和 let a=this.a; let b=this.b; 差不多一个意思.
第二行就是如果sortedinfo是null或者undefined之类的就初始为{}
let a=this.a;
if(!a) a = {};
@czd890: 这两个属性在初始化sortedInfo对象时,需要赋值吧,我这现在找不到这两个属性,看来不是ui自带的
@滴水不漏dayday:
var sortedInfo={};
console.log(sortedInfo.columnKey); // output undefined;
console.log(undefinedObject.columnKey); // trhow undefined exception.
别放了这里的代码, 在table改变的时候, 会callback到这个方法. 对sortedInfo 对象赋值.
handleChange(pagination, filters, sorter) {
console.log('Various parameters', pagination, filters, sorter);
this.filteredInfo = filters;
this.sortedInfo = sorter;
},
@czd890: 另外大佬再请教您一个问题,computed钩子函数的含义是什么?一直没有弄清楚
@滴水不漏dayday:
简单说就是每一个计算属性
(columns)所用到的数据
(data.columns, data.sortedInfo)任意一个发生改变
,计算属性就会重新计算
,并反应到UI上.
官方文档:
https://cn.vuejs.org/v2/guide/computed.html
https://cn.vuejs.org/v2/api/#computed
@czd890: 谢谢 大佬的帮助
@咸鱼摸鱼:
为神马我的点击没有样式
antd vue中table columns中sorter:true,重置样式你是怎么清空的呢大佬,重制方法是怎么写的呢