首页 新闻 搜索 专区 学院

antd vue中table columns中排序,在点击重置之后,如何清除排序,望大神解答!!

0
悬赏园豆:30 [已解决问题] 解决于 2021-02-03 10:45

将这个蓝色的小三角置灰,并且数据恢复排序之前的样子。不知antd vue中有没有方法可以调用,希望做过类似功能的大神能够提供一条思路!

咸鱼摸鱼的主页 咸鱼摸鱼 | 初学一级 | 园豆:49
提问于:2021-02-02 14:11
< >
分享
最佳答案
0

在单击它不就可以了么? 默认就是 (升序,降序,默认顺序.) 3个.

收获园豆:30
czd890 | 专家六级 |园豆:12024 | 2021-02-02 14:36

客户在点页面时提出来的,发现点击完重置按钮,这个排序还保持原来的样子,没有被重置。所以提出点击重置按钮,这个要变成默认排序

咸鱼摸鱼 | 园豆:49 (初学一级) | 2021-02-02 14:39

@滴水不漏dayday: column 有属性 sortOrder 重置的时候给它赋值应该可以.

czd890 | 园豆:12024 (专家六级) | 2021-02-02 14:40

@czd890: 赋值null?

咸鱼摸鱼 | 园豆:49 (初学一级) | 2021-02-02 14:42

@滴水不漏dayday:
文档是这样写的.

sortOrder	Order of sorted values: 'ascend' 'descend' false	boolean|string
czd890 | 园豆:12024 (专家六级) | 2021-02-02 14:43

@czd890: 文档地址可以提供一下吗

咸鱼摸鱼 | 园豆:49 (初学一级) | 2021-02-02 14:46

现成的:

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 | 园豆:12024 (专家六级) | 2021-02-02 14:46

@czd890: 看来我们参考的文档是一样的,我参考他底下的原码做了一下,一直提示sortedInfo 这个是未定义的,不太清楚问题出现在哪里。我的代码和源码的区别在于,他的columns声明在computed函数中,而我的声明在<script>标签中了,不知是不是这个导致的未定义

咸鱼摸鱼 | 园豆:49 (初学一级) | 2021-02-02 15:00

@滴水不漏dayday: 你的这个截图里面, 我也没有看到sortedInfo在哪里定义呀

czd890 | 园豆:12024 (专家六级) | 2021-02-02 15:03

@czd890: 在data域中定义了一下 另外他的这一部分代码,没看懂作用是什么,大神帮着瞧一眼

咸鱼摸鱼 | 园豆:49 (初学一级) | 2021-02-02 15:09

@滴水不漏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 | 园豆:12024 (专家六级) | 2021-02-02 15:21

@czd890: 这两个属性在初始化sortedInfo对象时,需要赋值吧,我这现在找不到这两个属性,看来不是ui自带的

咸鱼摸鱼 | 园豆:49 (初学一级) | 2021-02-02 15:43

@滴水不漏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 | 园豆:12024 (专家六级) | 2021-02-02 16:16

@czd890: 另外大佬再请教您一个问题,computed钩子函数的含义是什么?一直没有弄清楚

咸鱼摸鱼 | 园豆:49 (初学一级) | 2021-02-02 19:11

@滴水不漏dayday:

简单说就是每一个计算属性(columns)所用到的数据(data.columns, data.sortedInfo)任意一个发生改变,计算属性就会重新计算,并反应到UI上.

官方文档:
https://cn.vuejs.org/v2/guide/computed.html
https://cn.vuejs.org/v2/api/#computed

czd890 | 园豆:12024 (专家六级) | 2021-02-02 21:20

@czd890: 谢谢 大佬的帮助

咸鱼摸鱼 | 园豆:49 (初学一级) | 2021-02-03 10:44

@咸鱼摸鱼:
为神马我的点击没有样式

跟著旋律揚起嘴角 | 园豆:144 (初学一级) | 2021-08-02 14:34
其他回答(1)
0

antd vue中table columns中sorter:true,重置样式你是怎么清空的呢大佬,重制方法是怎么写的呢

跟著旋律揚起嘴角 | 园豆:144 (初学一级) | 2021-07-26 09:28
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册