首页 > 其他分享 >vue+element列表排序

vue+element列表排序

时间:2022-12-07 17:57:44浏览次数:45  
标签:vue column element --- 后台 排序 order row

1.默认排序很简单

在el-table标签中加入默认属性
:default-sort ="{prop:'date',order:'descending'}"
然后在单独一列中

    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="120”>
    </el-table-column>

2.后台排序

需要根据需要给后台发送信息,让后台做一些操作
首先在el-table标签中加入事件监听
@sort-change='sortChange'

然后单独一列中设置:

    <el-table-column
      prop="name"
      label="姓名"
      sortable='custom'
      width="120">
    </el-table-column>

然后方法的实现:

methods: {
      sortChange(column, prop, order) {
        //点击排序按钮后拿到column.order,可以发送column.order给后台,后台再根据什么排序来返回排序过后的数据
        console.log(column + '---' + column.prop + '---' + column.order)
        //输出的结果 [object Object]---name---ascending
      },
}

3.指定列值的格式化

    <el-table-column
      prop="address"
      label="地址"
      :formatter="formatter"
      show-overflow-tooltip>
    </el-table-column>
Methods{
      formatter(row, column) {
        return row.rowNum +'.'+ row.address;
      },
}

我们可以看到展现方式里边统一都有[rowNum].[地址]

标签:vue,column,element,---,后台,排序,order,row
From: https://www.cnblogs.com/andy0816/p/16963830.html

相关文章

  • vue data中的字符串用'和`包含有什么区别?模板字符串
    vuedata中的字符串用'和`包含有什么区别?字段代码我验证过可以正常的执行,但是我不清楚这个``(ESC下面的那个键)在这里和单引号有什么区别,请教大佬们作者:李李链接:https......
  • vue父子组件的传值总结
    情况一:父组件给子组件传值方法,使用props父页面:parent.vue<template><divclass="sidebar_contianer"><sidebar-item:routerData="transmitData"></sideb......
  • vue2 中实现全局事件组件通信
    Date:2022-11-1117:38:37Author:gavin目的:实现兄弟组件数据传输First:insertbelowcodeSecond:发布事件,aSecond:订阅事件,a识别一个好的前端开源项目的方法......
  • Vue 实时获取屏幕宽高
    exportdefault{name:'page-index',data(){return{windowWidth:document.documentElement.clientWidth,//实时屏幕宽度......
  • vue el-input只能输入正整数 替换e - + 等
      示例:输入分页页数,每页显示条数<el-inputtype="number"class="resNums"v-model="item.resNums":min="1":max="500"step="10"placeholder="结果显示条数"onK......
  • 算法练习:两指针之三色排序
    问题描述输入一个整型数组,每个元素在0~2之间,其中0,1,2分别代表红、白、蓝。现要求对数组进行排序,相同颜色的在一起,而且按红白蓝顺序先后排列。要求时间复杂度为O(n)。 问题分......
  • sql分组,排序等一些函数的用法
    今天项目的两个地图数据有问题,经检查是由于数据重复造成的,需要去重,解决问题后把使用的相关函数汇总一下   group by是分组函数,partition by是分区函数(像sum()等......
  • 字符集和排序规则
    字符集我们可以为MySQL服务器、数据库、表、字符类型的字段以及字符串常量指定一个字符集(CharacterSet)和排序规则(Collation)。其中,字符集决定了能够存储哪些字符,比如AS......
  • web技术分享| 图片上传与图片裁剪结合 vue3
    需求:上传的图片限制长宽相同;只能上传图片;图片大小限制500k当前项目仅需要上传的图片信息项目组件使用裁剪:vue-cropperimport"vue-cropper/dist/index.c......
  • 五. 排序算法
    1.定义:1.1原地排序和非原地排序def.原地排序算法使用恒定的的额外空间来产生输出。原地排序:选择排序,插入排序,希尔排序,快速排序,堆排序。非原地排序:归并排序,计数排序,基数排......