iview中table中默认排序

已于 2022-08-09 11:24:21 修改
阅读量382 收藏
点赞数
分类专栏： 开发bug 文章标签： view design
于 2022-08-04 14:18:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jibuyueqian/article/details/126158315
版权

在使用Table组件的时候需要根据后端返回的数据进行排序，但是因为Table 自带一个默认排序，这个时候有可能会导致Table中显示的和借口返回的不一致，是因为 Table默认的排序是根据ASCII进行排序，如果都是字符串的话，123就会比4小，所以可以转成Number类型进行排序
如果后端返回的都是string类型的，我们可以在拿到数据之后手动转成Number类型,公式，可以使用+String,或者是string - 0，时间的xx-xx-xx需要转成时间戳，转时间戳的公式date.getTime()

一个程序
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解IView表格的内外部sort排序，filter筛选方法
穷途陌路的博客
08-16 2万+
详解IView表格的排序sortMethod，筛选filterMethod方法 ​ IView框架（https://www.iviewui.com/）是一套基于 Vue.js 的高质量UI 组件库，整体的效果还是非常好看的。但是其中的表格组件虽然没有bootstrap-table的组件好用，但是也能够满足基本的需求。 ​ 这次我使用的是sortMethod，filterMethod方法...
iview默认排序序号不变
qq_28353055的博客
04-24 1401
在iview设置sortable为true时，组件默认排序，如果有分页的话，排序会发生变化，然后想了一种笨方法处理 <Table ref="table" @on-sort-change="sortChange" :columns="columns" :data="data"></Table> // 表格样式 <script> // 设置一个全局变量ord...
iview table 排序
weixin_45624316的博客
08-24 899
{ title: '分数', key: 'score', align: 'center',sortable: true ,sortable: true, //配置排序 minWidth: 100, sortMethod: (a, b, type) => { //核心是这里 //console.log(a, b, type); .
iView ui Table表格拖拽排序
qq_45094682的博客
05-10 567
需求目的：拖动表格数据自定义排序，然后保存提交给后台就行了。1.在 Table 标签上设置`draggable="true"`或者`draggable`属性，开启拖拽功能 2.添加 `@on-drag-drop="changeTableSort1"`方法，实现拖拽逻辑
iview table自定义排序规则
qq_38935512的博客
10-18 1357
下方 obj 就是columns中得一项 let obj = { title: item.name, minWidth: item.width, key: item.enName, sortable: item.sortable, sortMethod: (a, b, type) => { return this.$utility.sortFun(a, b, type) }, dataSourceList: item.dataSourceList || [], }
iview table高度动态设置方法
08-27
下面小编就为大家分享一篇iview table高度动态设置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Iview Table组件中各种组件扩展的使用
10-17
主要介绍了Iview Table组件中各种组件扩展的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
iview的table组件自带的过滤器实现
12-10
iview的table组件自带的过滤器实现 iview框架的table组件自带的过滤器的使用方法： [removed] export default { data () { return { columns: [ { title: 'Name', key: 'name' }, //过滤器 //通过给 ...
iview中table排序
冰雪为融的博客
12-08 7134
看到一篇比较好的文章，分享出来：https://blog.csdn.net/qmzmzxk/article/details/81748422 官网也写得很清楚：https://www.iviewui.com/components/table#PX 注意一点，初始化排序，官方解释：通过给某一列设置 sortType 可以在初始化时使用排序。 { title: '...
viewUi的table里面的排序功能
weixin_70426591的博客
11-04 269
viewUi table 自定义排序
【ife】任务三十八：UI组件之排序表格
筱葭的博客
01-12 423
window.onload = function() { var students = []; students[0] = new Student("小明", 80, 90, 70); students[1] = new Student("小红", 90, 60, 90); students[2] = new Student("小亮", 60, 100, 70); createTable
Vue练习--表格数据筛选排序
失心疯的博客
09-07 6791
Vue练习–表格数据筛选排序 目录 代码案例 v-model v-on v-for 计算属性 sort()方法 代码案例 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;vue练习&lt;/ti
Render函数封装一个可排序的表格组件
yanggreater的博客
08-16 916
主要思路:      　在v-table组件props接受两个参数，一个就是有多少列columns(数组),另一个就是data(数组),同时又简单的添加一个stripe是否给表格设置一个简单的样式.如下图： 接下来就是render主要思想：在构造元素时，首先要构造标题(&lt;th&gt;)，那么就要循环父组件传来的columns数组，不断的遍历里面的对象循环显示(但是在有排序功能的需要再...
Vue中iView组件的一些用法
weixin_43975684的博客
02-15 2656
走投无路时再去阅读说明。 －－L. Iasellio
iview table 默认排序字段不高亮解决办法
最新发布
yjl13598765406的博客
11-23 814
iview table 默认排序字段不高亮解决办法，后端排序
Vue中的vxe-table教程8-表格排序
weixin_42289273的博客
01-12 9984
知识点： 1. 基本排序：sortable 2. 点击表头进行排序, trigger设置触发原，defaultSort设置默认排序字段及排序顺序，orders设置排序轮转顺序 效果图： 1. index.html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <sc
iview中table组件的排序问题——关于后端多列排序的实现
William_Franca的博客
07-12 7300
–js <Table @on-sort-change=“sortChanged” :row-class-name=“rowClass” :columns=“columns2” :data=“rows” stripe border :highlight-row=“highlight_row” @on-selection-change=“rowSelectChange” @on-row-clic...
iview表格设置初始化sortType
A20190518的博客
10-26 509
1、动态设置columns，给需要排序的列设置 sortable: true 2、把动态columns数据赋给表格绑定的columns数据 3、设置this.columns （表格绑定的数据）.forEach(item => { if(item.sortable){ item.sortType = ‘asc’ } }) 注：如果直接在第一步同时sortable: true, sortType: ‘asc’ 再第二步赋给表格绑定的columns数据，这样可能不生效 ...
Iview使用总结
香蕉你个芭呐呐的博客
07-09 1190
按需引 2.
iview中table清除选中项
07-17
在 iView 中，要清除表格（Table）中的选中项，可以通过以下步骤进行操作： 1. 首先，你需要在表格的数据源中添加一个 `selected` 属性来表示是否被选中。例如，如果你的数据源是一个数组，可以为每个数组项添加一个 `selected` 属性，默认值为 `false`。 2. 在表格的模板中，使用 `row-selection` 属性来启用行选择功能，并将 `selected` 属性绑定到数据源中的 `selected` 属性。例如： ``` <Table :data="tableData" :row-selection="{ selected: tableData.filter(item => item.selected), onChange: handleSelectionChange }"> <Table-column type="selection" width="60"></Table-column> <Table-column prop="name" label="Name"></Table-column> <Table-column prop="age" label="Age"></Table-column> </Table> ``` 3. 在你的方法中，实现 `handleSelectionChange` 方法来处理选中项的变化。例如，你可以将选中的行存储到一个变量中，并在需要清除选中项的时候将该变量清空。例如： ``` data() { return { tableData: [ { name: 'John', age: 20, selected: false }, { name: 'Jane', age: 25, selected: false }, { name: 'Tom', age: 30, selected: false } ], selectedRows: [] }; }, methods: { handleSelectionChange(selection) { this.selectedRows = selection; }, clearSelection() { this.selectedRows = []; } } ``` 4. 最后，当你想要清除选中项时，调用 `clearSelection` 方法即可。例如，可以在某个按钮的点击事件中调用该方法。 ``` <Button @click="clearSelection">Clear Selection</Button> ``` 通过以上步骤，你可以在 iView 中清除表格的选中项。希望对你有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值