ant design of vue的table默认不排序干掉

最新推荐文章于 2022-11-18 14:04:40 发布
最新推荐文章于 2022-11-18 14:04:40 发布
阅读量865 收藏 3
点赞数 4
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tiffany_Struggle/article/details/119901102
版权

不知道大家在做ant design of vue 的表格排序的时候有没有留意到这个表格自带的排序功能是有三种效果的，降序>升序>不排序，然后我们的老大跟我说要降序跟升序，把不排序的干掉，就剩下降序跟升序，在csdn查了很久，才找到一个比较适合我项目的，其实是因为不想写太多代码了，而且很佩服这位老兄的清奇脑回路，帮我解决问题，下次把他的链接也给加上来，我之前没有保存，还要去找找，那么下面就上代码吧

文档是有说的

所以只需要在你的表格的Column 配置那里将这两句加上即可

 defaultSortOrder: 'descend',

 sortDirections: ["descend", "ascend","descend"],

默认是降序，最近项目很忙，所以时不时会更新，感谢大家的观看

Tiffany_Struggle
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
antd table排序 vue_ant-design-vue中的table取消默认不排序的状态
weixin_39633452的博客
12-19 2992
ant-design-vue中的table组件具有排序的属性，该排序属性有三种状态：升序、降序和不排序。在项目开发中，有时产品经理会要求排序时只能有升序或降序两种状态，而table组件中却没有相应的API配置，那么我们如何取消不排序的状态呢？一、排序相关APItable组件中关于排序的API有4个：sorter、sortOrder、sortDirections以及change事件。sorter：排...
ant-design-vue(可拖拽table).vue
03-04
ant-design-vue(可拖拽table).vue
sort降序模板
房东的jian的博客
02-08 85
#include <bits/stdc++.h> using namespace std; bool cmp(int a,int b) { return a>b; } int main() { int n; cin>>n; int a[n]; for(int i=0; i<n; i++) cin>&...
antDesign table 默认排序 ，解决defaultSortOrder不生效（antDesign 3.X）
weixin_46880303的博客
11-06 8393
state = { sortedInfo:{ columnKey:'默认排序的项', order: 'ascend' },//默认排序 } column = [ { title: "默认排序的项", dataIndex: '默认排序的项', key: '默认排序的项', sortOrder: this.state.sortedInfo.columnKey === '默认排序的项' && this.state.sortedInfo.order,
ant Design 表格 只设置升序和降序，取消--取消排序功能
weixin_34332905的博客
04-18 7013
状态值 state = { sortedInfo: null, saveSortedInfo:null }复制代码在表头设置属性 sorter: (a, b) => a.name.length - b.name.length, sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order复制代码...
antd vue table使用排序时，如何去掉默认不排序状态
weixin_42342008的博客
03-28 3223
ant-design-vue中的table组件具有排序的属性，该排序属性有三种状态：升序、降序和不排序。在项目开发中，有时产品经理会要求排序时只能有升序或降序两种状态，而table组件中却没有相应的API配置，那么我们如何取消不排序的状态呢？ 一、排序相关API table组件中关于排序的API有4个：sorter、sortOrder、sortDirections以及change事件。 sorter：排序函数，本地排序使用一个函数，需要服务端排序可设为 true。 sortOrder： 排序的受控属性，外界
(vue)AntD表格操作完成后去掉勾选
nyf_unknow的博客
06-14 2733
(vue)15.AntD表格操作完成后去掉勾选
ant design vue 表格table 默认勾选几项的操作
01-22
在 ant design vue 中，表格的第一列是联动的选择框 截一张官方文档图，图示最后一排就是禁用状态 点击 checkbox 会触发onChange , 从而得到selectedRowKeys,selectedRowKeys就是选中的 key 数组。 onChange: ...
ant-design-vue 实现表格内部字段验证功能
10-15
主要介绍了ant-design-vue 实现表格内部字段验证功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
ant-design-vue中将表格同一列内数据排序、数据相同的单元格合并
最新发布
06-08
ant-design-vue + VUE3,在table中按照某一列名进行排序并将内容相同的列合并； 包含原table数据排序，重组，行合并
ant design vue中表格指定格式渲染方式
01-18
注意点：定义的columns一定要写在data中，否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别 渲染方法1： 指定渲染函数： const columns = [ { title: '排名', dataIndex: 'key', ...
基于 Ant Design of Vue 实现的 Ant Design Pro
05-30
4. **预设组件**：Ant Design Pro of Vue 包含了大量的预设组件，如`Layout`（布局）、`Form`（表单）、`Table`（表格）、`Button`（按钮）、`Card`（卡片）等，这些组件遵循Ant Design的设计规范，提供了一致的用户...
vue用ant design中table表格,点击某行时触发的事件操作
01-18
使用customRow 设置行属性，写对应事件 ...补充知识：Ant-Design-Vue table 合并单元格，并且添加点击事件 点击行，有一个customRow。可以配置点击事件。 单元格的自定义分为两种方式。 一种是：通过tem
基于AntDesignofVue实现的AntDesignProVue版
08-08
【标题】"基于AntDesignofVue实现的AntDesignProVue版"是指利用Ant Design Vue库构建的Ant Design Pro Vue版本。Ant Design Pro是阿里巴巴推出的一个企业级前端框架，旨在为中大型项目提供开箱即用的中后台解决方案...
Ant Design Vue实现的表格排序点击第三次取消排序的解决方法
鲁小班的博客
12-25 2063
antd table排序 vue_design vue 表格开启列排序的操作
weixin_39722692的博客
12-19 1279
开启排序1、本地数据排序column数据设置，需要开启的列设置sorter: (a, b) => a.address.length - b.address.length, 自定义排序方法2、服务端排序sorter设置true点击排序，表格触发change方法，接受参数change (pagination, filters, sorter, { currentDataSource })第三个参...
【vue】element 中 table 的 默认排序 、后台排序 、列值的格式化展示
热门推荐
当白的技术小窝 ( git : https://github.com/canwhite )
11-06 2万+
1.默认排序很简单   在el-table标签中加入默认属性 :default-sort ="{prop:'date',order:'descending'}" 然后在单独一列中     &lt;el-table-column       prop="date"       label="日期"       sortable       width="120”&gt;     ...
【ant design vue】a-table列排序
weixin_42322886的博客
11-18 3086
查询某个功能记录可点击某列进行排序，使用 ant 中的 a-tabel 组件。首先新建表格，在表格中声明change事件。这里涉及到了分页，所以每次排序我都会调用API再次获取数据，如果只是当前页进行排序，就不用调用了。ascend代表升序，descend代表降序。
antdesignvue table默认选中
06-03
您可以在Ant Design Vue的Table组件中使用`row-selection`属性来实现默认选中某一行或多行。 例如，如果您想要默认选中第一行和第三行，您可以这样做： ```html <a-table :row-selection="{selectedRowKeys: [0, 2]}" ...> ... </a-table> ``` 其中`selectedRowKeys`属性是一个数组，包含要默认选中的行的key值（可以是数字、字符串等）。在这个例子中，第一行的key值为0，第三行的key值为2。 请注意，您还需要为每一行设置一个唯一的key值，例如： ```html <a-table :dataSource="dataSource" :rowKey="record => record.id" ...> ... </a-table> ``` 在这个例子中，我们使用了`dataSource`属性来指定表格的数据源，同时为每一行设置了一个`rowKey`属性，该属性是一个函数，用于返回每一行的唯一标识。在这个例子中，我们假设每一行都有一个`id`属性，因此我们将`rowKey`设置为`record => record.id`。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值