精华内容
下载资源
问答
  • element表格提供了三种数据的排序方法: 升序排序 ascending 降序排序 descending 默认排序 null 如果是前端本地排序 可设置 sort-doders 属性为 ['ascending', 'descending'] 去除默认排序具体可参考 element...
    • element表格提供了三种数据的排序方法:
      • 升序排序 ascending
      • 降序排序 descending
      • 默认排序 null

    如果是前端本地排序 可设置 sort-doders 属性为 ['ascending', 'descending'] 去除默认排序具体可参考 element文档

    • 远程排序即为后端排序,后端可按照前端参数(升序、降序、页码、数量)返回所有数据中的相应数据,看代码:
    <el-table :data="listData" stripe border @sort-change="sortChange" :default-sort="{prop:'createdOn', order: 'descending'}">
        <el-table-column prop="txCode" label="序号"></el-table-column>
        <el-table-column prop="createdOn" label="时间" sortable="custom" width="180"></el-table-column>
     </el-table>
    

    注:远程排序需有列设置 sortable="custom" ,sort-change 监听点击排序的变化
    本例需求为对于时间列进行排序,默认排序为倒序,要求点击排序不是升序就是降序,也就是去除element中的默认排序

    • 思路:
      排序变化会触发 sortChange 函数,并且会传进一个参数,如下:
    sortChange (obj) {
      console.log(obj)
    }
    

    由于在上面设置 default-sort 故初始化表格的时候得到的obj为 default-sort(升降序order和需要升降序的列的属性名称prop) 设置后的obj,但下次点击就会触发element内部默认排序,如下图:全为 null 的即为默认排序
    在这里插入图片描述
    colum 为点击升降序列的信息,里面包含列的属性(如宽度、排序方式、lable 等)
    要想去除默认排序,只需改变obj中的值为上次相反的值即可

    data () {
      filtrate: {
        sequence: '',
        sequenceOrder: ''
      },
      sortColumn: ''
    },
    sortChange (obj) {
      if (obj.order === null) {
        // 后面点击会进入默认排序,给obj赋相反的值,然后根据新值请求数据,再返回obj,界面就会按照设置发生变化
        this.filtrate.sequence === 'descending' ? obj.order = 'ascending' : obj.order = 'descending'
        obj.prop = this.filtrate.sequenceOrder
        obj.column = this.sortColumn
        // 注意:还要改变column里面的排列方式order
        obj.column.order = obj.order
        // 以下两行即为请求后台接口,把obj里的信息传递进去即可
        this.pageNo = 1
        this.getBuyList()
        return obj
      }
      // 初始化第一次进来就会走这里,给sortColumn、filtrate.sequence、filtrate.sequenceOrder赋值再请求数据
      this.sortColumn = ''
      this.sortColumn = obj.column
      this.filtrate.sequence = obj.order
      this.filtrate.sequenceOrder= obj.prop
      this.pageNo = 1
      this.getBuyList()
    }
    

    总结:我们知道 sort-change 返回一个对象,里面包含三个参数,分别为 order prop column 点击默认这三个值全部为 null ,所以我们只需改变点击列的相应值的排列方式 order 即可,因为 column 里也包含了 order 故也要改变里面的 order 为上次排序相反的排序 ,这样就实现了升序和降序的切换

    展开全文
  • 今天小编就为大家分享一篇vue element table 表格请求后台排序的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • element表格排序升序降序

    千次阅读 2019-05-30 09:57:30
    :default-sort = "{prop: 'date', order: 'ascending'}" //或者descending
    :default-sort = "{prop: 'date', order: 'ascending'}" //或者descending  
    
    展开全文
  • element表格中的数据有两种形式:数值、字符串。element自带排序方法会发生排序错乱。如图:没有金额时,展示 --,图中升序排序错乱。 解决步骤 1. 在el-tabel中添加 @sort-change="handleSort" <el-table :...

    问题描述

    element表格中的数据有两种形式:数值、字符串。element自带排序方法会发生排序错乱。如图:没有金额时,展示 --,图中升序排序错乱。
    在这里插入图片描述

    解决步骤

    1. 在el-tabel中添加 @sort-change="handleSort"

    <el-table 
       :data="tableData" 
       class="my-table" 
       @sort-change="handleSort"
    >
    </el-table>
    

    2. methods中添加方法

    方法中deepCopy为深拷贝方法,欲了解请点击:https://blog.csdn.net/honeymoon_/article/details/118703712

    //自定义表格排序
    /**
     * 思路:
     * 先过滤掉'--'
     * 对新数组进行常规升/降序排序,根据传入的order判断是升序还是降序
     * 如果点击表头取消排序也需要做判断,将数据还原成接口返回的数据
     */
    handleSort({ column, prop, order }) {
      //prop:排序的字段、order:升序(ascending)、降序(descending)、取消排序(null)
      let copyTableDate = deepCopy(this.tableData);   //拷贝表格数据
      let reserveData = [];                          //过滤后保留的数据
      let filterData = [];                          //过滤掉的数据
      //开始进行数据过滤:将'--'过滤到filterData数组中,剩余数值型数据保留到reserveData中。
      copyTableDate.forEach(item => {        
        if(item[prop] === '--') {    //item[prop]:将要排序那个字段的值
          filterData.push(item);    //item:表格中的这条数据,即row
        } else {
          reserveData.push(item);
        }
      });
      // 排序
      if (order !== null) {
        if (order === 'descending') {   //降序
          // 冒泡排序
          reserveData = reserveData.sort((a, b) => b[prop] - a[prop]);
          reserveData.reverse();
          // 过滤掉的数据添加到数组末尾
          filterData.forEach(item => {
            reserveData.push(item);
          });
          //两次reverse()是为了保证,无论升序还是降序都把字符串保留在末尾
          reserveData.reverse();    
          this.tableData = reserveData;
        } else { //升序
          reserveData = reserveData.sort((a, b) => a[prop] - b[prop]);
          filterData.forEach(item => {
            reserveData.push(item);
          });
          this.tableData = reserveData;
        }
      } else {
        // 取消排序
        //this.copyTable是在接口得到表格数据的时候拷贝了一份,用来还原取消排序时的表格数据
        this.tableData = this.copyTable;  
      }
    },
    

    3. 验证

    //升序
    在这里插入图片描述
    //降序
    在这里插入图片描述
    //取消排序
    在这里插入图片描述

    展开全文
  • 去掉element表格排序的null状态

    千次阅读 2019-09-28 17:41:24
    element表格排序有三种状态,升序、降序、null,现在想要实现的效果为只要升序和降序。 主要思想是检测返回的排序值是否为null,如果是的话则和上一个排序取相反的值(需要先用变量保存上一次的排序值),代码如下:...

    element表格排序有三种状态,升序、降序、null,现在想要实现的效果为只要升序和降序。
    主要思想是检测返回的排序值是否为null,如果是的话则和上一个排序取相反的值(需要先用变量保存上一次的排序值),代码如下:

    //这是排序触发函数
    change_sort(row) {
        if (row.order === null) {
            this.save_sort === 'descending' ? row.order = 'ascending' : row.order = 'descending'
            row.column.order = row.order
        }
        if (row.order == 'ascending') { //降序
            this.listParams.sort = 1;
        } else {
            this.listParams.sort = 0;
        }
        this.save_sort = row.order;
        this.getList();
    },
    
    展开全文
  • element表格的后台排序

    千次阅读 2019-04-12 09:54:21
    title: element(1)表格的后台排序 date: 2019-03-21 13:00:00 +0800 update: 2019-03-21 13:00:00 +0800 author: me cover: http://ww1.sinaimg.cn/large/006jIRTegy1g17bewj3nqj31kw11xk0o.jpg preview: element-ui...
  • 解决element自定义排序空值问题 一、先添加属性代码 先给html需要排序列中加上 :sortable=“true” <el-table-column prop="last_time" align="center" min-width="10%" label="最后跟进时间" :sortable="true...
  • element ui 解决表格排序失效

    千次阅读 2020-07-20 16:51:47
    element ui 排序很简单只需要加 sortable="custom" 通过后端排序后,吧数据返回至前端,但是当你对表格进行行内编辑,或者其他的复杂操作时,就会出现失效。 在啰嗦一句,后端排序数据类型要注意,你搞个字符串类型...
  • el-table-column prop="sort" label="排序" sortable width="72"> <template slot-scope="{row,$index}"> <div @dblclick="{{ chengenum($index) }}"> <el-input v-if="editable
  • 目前只支持日期格式排序,数字也没有问题 1.添加 @sort-change=“handleSortChange” <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @sort-change=...
  • element-ui 表格 排序

    千次阅读 2019-08-02 15:29:26
    使用@sort-change监听排序变化,设置sortable='custom' <el-table :data="tableData" @sort-change='sortChange'> <el-table-column prop="startDate" sortable='custom' label="出票日期"></el-...
  • element-UI表格排序问题

    千次阅读 2019-03-05 10:49:02
    遇到的问题:表格不能排序 解决:在列上加: :sort-method = "sortChange1" 方法 &lt;el-table :data="tableData" style="width: 100%" :default-sort = "{prop: 'date',...
  • vue element table表格 自定义排序规则

    千次阅读 2021-01-22 10:33:29
    项目需求:前端做排序,后台返回的数据有合计一项,排序时,合计始终在最后一行 使用 @sort-change='sortChange' <el-table-column prop="revPar" align='center' sortable="custom" label="RevPAR" ...
  • element-table实现自定义表格排序

    千次阅读 2020-08-30 17:10:25
    在el-table-colum中加入sortable=“custom”,使用了该属性之后当前列就可以进行排序排序时会调用sort_change方法进行自定义排序 sortFun(attr, rev){ // 第一个参数传入info里的prop表示排的是哪一列,第二个参数...
  • vue element table 表格列进行再排序

    千次阅读 2019-02-27 14:08:23
    示例 展示 ...用法 https://github.com/oujin-nb/column_element_dragtable 源码 &lt;template&gt; &lt;div&gt; &lt;el-table v-on="$listeners" v-bi...
  • element-UI:el-table 表格排序 需求:el-table 需要支持排序,即点击当前列头实现排序。 最终实现效果: 思路:
  • vue element table 表格请求后台排序

    千次阅读 2018-08-08 17:16:01
    1、ElementUi文档已经说了,如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。 &lt;el-...
  • 1.对全部数据进行排序,需要对el-table绑定sort-change监听 <el-table :data='tableData' @sort-change='sort_change'> sort-change绑定方法具有参数:column,这是一个对象: column: { prop: 'xxxx', // ...
  • element-ui 表格排序失效

    千次阅读 2019-06-18 14:56:00
    失效原因:属性prop丢失 如果内容需用 <... 来盛放,那el-table-column 内的 prop就起不到作用,但他会影响 sortable 排序,所以还是写上为妙 转载于:https://www.cnblogs.com/listen9436/p/11045163.html...
  • Vue element表格实现拖动排序

    千次阅读 2019-10-23 13:42:27
    最近在vue项目开发时,领导提了一个需求,需要实现自由拖动element表格进行排序,小编上网查了很多方法,最终实现了这个功能。在这里小编跟大家分享一下如何实现这个功能的。 首先我们需要安装sortable.js这款插件 ...
  • element表格序号排序

    2021-01-27 15:46:45
    elementUI表格按序号排序 注:复制黏贴即可 <el-table-column label="序号" align="center"> <template slot-scope="scope"> {{ (queries.page - 1) * queries.size + scope.$index + 1 }} </...
  • element table 排序功能

    2021-04-20 13:35:08
    table属性 :default-sort="{prop: 'updateTime', order: 'descending'}" 需排序列属性 sortable
  • element表格多列排序,点击日期的排序,然后再点击姓名的排序,将两个排序字段传给后端排序 遇到的问题: element的Table组件只支持单列排序,当你点击另一列的排序的时候,会自动取消上一个排序。网上搜了...
  • element-ui table表格排序

    千次阅读 2019-03-20 14:59:45
    首先阅读api文档,文档还是...向后台服务发请求,进行数据列表的排序,先在需要排序的字段上增加sortable="custom" 和prop,比如使用开始使用排序prop="createTime"; 然后在el-table上绑定事件@sort-change="sort...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 12,779
精华内容 5,111
关键字:

element表格排序