Element UI Table排序顺序错乱处理

这篇具有很好参考价值的文章主要介绍了Element UI Table排序顺序错乱处理。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1、(a, b) => { return a.total_money - b.total_money; } 

a-b>0表示a大于b;

a-b=0表示a等于b;

a-b<0表示a小于b;

<el-table-column 
    prop="total_money"
     label="支付金额(元)" 
    width="180" 
    sortable  
    :sort-method="(a, b) => { return a.total_money - b.total_money; }">
</el-table-column>

2、如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听

sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。 

<el-table
    :data="tableData"
    style="width: 100%"
    :default-sort = "{prop: 'date', order: 'descending'}" @sort-change="change">
    <el-table-column
      prop="date"
      label="日期"
      sortable="sortable"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter">
    </el-table-column>
  </el-table>
var Main = {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }]
      }
    },
    methods: {
      change(res,s){
        console.log(res)
        console.log("---",res.order)
      },
      formatter(row, column) {
        return row.address;
      }
    }
  }

文章来源地址https://www.toymoban.com/news/detail-739466.html

到了这里,关于Element UI Table排序顺序错乱处理的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • element-ui中使用el-table ,el-table-column循环列发现列错乱解决方法

    由于 需要动态循环列展示表格 而不得不 套一层div 标签时会造成表格列错乱的想象,这是因为el-table中不允许有除el-table-column标签以外的元素。 1、 或许你可以试试使用template 标签包裹 2、把div标签删了,不用它包裹 3、再循环前多加一行宽度为1的列 el-table-column 前面的两种方

    2024年02月11日
    浏览(55)
  • Element UI table 顺序拖动

    使用Sortable.js插件。对element-ui中的el-table进行拖拽行排序。 官网: [1] Sortable.js官网配置项说明等 [2] Sortable更多使用示例 一、基本使用 1、安装 2、引用 3、使用 说明: orderNum :为排序号 handle : 使列表单元中符合选择器的元素成为拖动的手柄,只有按住拖动手柄才能使列表

    2023年04月21日
    浏览(28)
  • vue2/3 - 基于element(ui/plus)实现el-table表格每行可拖动换位置排序,表格列(表头)可拖动交换位置功能效果(table表格可拖曳排序的行和列,用鼠标动态拖拽排序表格行列)

    在vue2、vue3项目开发中,element饿了么组件库实现表格el-table组件支持【行和列可拖曳排序、换位置】功能,每行数据可拖拽进行排序调换位置,每列数据可以自由拖动进行调换位置。 提供详细示例代码,复制源码换个数据就能用了。

    2024年04月13日
    浏览(60)
  • Element UI table表格行拖动排序

    先看第一种效果:拖动表格行进行拖动排序  第二种效果 拖动指定按钮进行拖动排序  前提是已经运行项目,并安装并配置element ui  直接上代码:Html部分 JS部分 所依赖关键插件为:sortablejs 官网地址 想要用第一种效果,需要去掉 new Sortable中 handle配置项,其中第一个参数

    2024年02月10日
    浏览(42)
  • element-ui复杂table表格-动态新增列、动态调整行、列顺序

    目标: 实现一个复杂table具有以下功能:表格行展开、全部展开、收起、全部收起;可动态配置展示哪些列、调整列展示顺序;动态调整行顺序、行上移、行下移、行移动最顶部、行移动最底部 思路: 本质上就是将表格看成一个数组,对表格的操作当成对数组的操作。

    2024年02月11日
    浏览(49)
  • element ui - el-table数据排序

    后台一次性返回全部数据,需要前端对所有数据进行分页和排序。 使用element-ui的 自定义排序 规则,将 sortable 设置为 custom ,同时在 Table 上监听 sort-change 事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而对所有数据进行排序再对表格数据进行分页计算。 如上

    2024年02月11日
    浏览(47)
  • element(-ui 和 -plus)的table实现拖拽排序

    首先我要介绍一个超级好用的工具,sortablejs 直接安装 yarn add sortablejs , 后在自己的vue文件中引入就可以直接使用了 首先提供element plus 和 -ui的区别只在于 传入Sortable的el。 element-ui: ‘.el-table__body-wrapper tbody’ element-plus: ‘.el-table__body tbody’ 感谢这个博文让我了解到了sortable

    2024年02月08日
    浏览(34)
  • element ui el-table sorttable实现表格拖拽排序(vuedraggable)

    如果已经安装了 vuedraggable ,则可以不用安装 sortablejs

    2024年02月11日
    浏览(41)
  • vue element-table(树形结构),实现同级拖动排序

    ####需求:树形结构的table需要实现同级拖拽排序 1.vue引用sortablejs 参考相关配置http://www.sortablejs.com/options.html 2.定义变量 3.初始化created中调用方法,方法如下 4.扁平化数据方法 5.犹豫这个过程中需要子级存在父级的parentId,自己把扁平化的方法改造了一下,在查询完列表数据时

    2024年02月14日
    浏览(41)
  • 前端vue3+element plus 分页table排序功能实现

    我有如下所示的一个table,数据data是一个computed计算属性,一般情况下筛选使用element的sortable属性就可以了,可查看Element - The world\\\'s most popular Vue UI framework 但我的 table 是一个分页的 table ,当我使用 sortable 时发现,它只是对当前页的数据进行排序,但这并不是我需要的,我的

    2024年02月14日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包