element-ui 中的表格设置正确的排序以及怎么设置默认排序

这篇具有很好参考价值的文章主要介绍了element-ui 中的表格设置正确的排序以及怎么设置默认排序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文主要解决两个问题,第一个,在element-ui中,直接设置参数排序,达不到预期效果,预期是按照数字的大小进行排序;第二个,想对表格中某个字段设置默认的排序方式
现象:
直接设置在 el-table-column设置sortable=true,点击升序降序,结果是字符串的排序结果,不是预期的按照数字大小排序,结果如下
<el-table-column :sortable="true" label="学号" ></el-table-column>
el-table默认排序,VUE专项栏目,vue.js,javascript,elementui,Powered by 金山文档
el-table默认排序,VUE专项栏目,vue.js,javascript,elementui,Powered by 金山文档

要达到预期,需要设置sort-method
<el-table-column
    :sortable="true"
    :sort-method="sortMethod"
    prop="no"
    label="学号"
    show-overflow-tooltip
 ></el-table-column>
// 按照数字大小排序 方法-
sortMethod(before, after) {
  return Number(before.no) - Number(after.no);
},
// 按照数字大小排序 方法二
sortMethod(before, after) {
  return before.no.localeCompare(after.no,"en-u-kn-true")
},
预期结果如下
el-table默认排序,VUE专项栏目,vue.js,javascript,elementui,Powered by 金山文档
此时可能会有进一步的需求,前端设置默认的排序方式,例如:默认设置成升序,此处提供两种
1、初始化数据时,先排序再渲染(此处就不展示例子了,直接通过对数据排序就行)
2、通过调整组件参数,直接设置默认排序方式
在实践第二种设置默认排序方式的时候,遇到一个问题,直接设置default-sort={prop:'no'},基本满足默认排序的情况,但是会有不太完美的地方,初次进来点击排序表头空白处或者是点击到取消了排序效果时,不会恢复到默认的排序方式。
针对上面的情况,我们使用sort-change,监听到order不存在的时候,意思就是默认进来或者是排序效果被取消时,我们直接手动的设置一下排序方式为默认的,下面就是怎么实现
备注:order包含['ascending', 'descending', null]

参考官方文档: https://element.eleme.cn/2.10/#/zh-CN/component/table
<el-table
      ref="table"
      :data="tableData2"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
      :header-cell-class-name="cellClass"
      width="200"
      border
      :default-sort="{prop:'no'}"
      @sort-change="sortChange"
    >

 sortChange({ column, prop, order }) {
      if (!order) {
        this.$refs.table.sort("no", "ascending");
      }
    },

预期结果,初始化进入页面就默认的是升序

el-table默认排序,VUE专项栏目,vue.js,javascript,elementui,Powered by 金山文档

通过上面的操作,就能达到预期的效果,此文章只针对前端排序哦,个人愚见,欢迎大家指教文章来源地址https://www.toymoban.com/news/detail-785134.html

到了这里,关于element-ui 中的表格设置正确的排序以及怎么设置默认排序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Element-UI表格嵌入popover出现的问题以及解决方案

    最近几天遇到一个比较棘手的问题,需求是在触发表格某一列的cell,弹窗展示新的数据(不是表格内的数据,而是需要重新向后端请求) 我这里使用了popover展示弹窗 代码是删减过的,为了更清楚地记录,有些这里没有用到的代码就删了 1. 触发方式是hover(写在popover的trig

    2024年02月16日
    浏览(39)
  • VUE element-ui实现表格动态展示、动态删减列、动态排序、动态搜索条件配置、表单组件化。

        1、本组件支持列表的表头自定义配置,checkbox实现 2、本组件支持列表列排序,vuedraggable是拖拽插件,上图中字段管理里的拖拽效果 ,需要的话请自行npm install 3、本组件支持查询条件动态配置,穿梭框实现 https://download.csdn.net/download/askuld/88216937

    2024年01月16日
    浏览(60)
  • 随手记:使用sortable.js 实现element-ui el-table 表格上下拖拽排序

    需求场景: 表格可以实现上下拖拽row实现新排序 首先,安装sortable.js  引入表格排  全局挂在组件 使用页面引入 使用sortable.js表格一定要有唯一的row-key,一般绑定的是id,不然拖拽会不生效 data声明 sortableContainer: null,为的是后面如果有需要可以做销毁操作   因为我这里是表

    2024年02月22日
    浏览(53)
  • 修改element-ui中的表格el-table的滚动条样式

    一.单独修改element-ui中的表格el-table的滚动条样式(两种方法) 1. 2.  二.保持整个页面的滚动条的风格是一致(直接改全局的滚动条样式) 三.页面内某一组件滚动条样式美化  scroll-bar是需要滚动条组件的元素,类名自定义

    2024年02月11日
    浏览(57)
  • 如何实现element ui中的表格全部数据分页排序

    默认情况下, table表格设置了sortable是只能当前页, 数据进行排序的, 这显然是没有多大意义的 ,那么如何实现全部数据分页排序呢? 首先 ,把sortable 写成sortable=“custom” 然后,在 el-table标签中加入 @sort-change=\\\'sortChange\\\' 最后 ,sortChange方法代码如下: sortChange(val){      

    2024年02月11日
    浏览(42)
  • (Table)操作:Element-ui 中 Table 表格的设置表头/去除下标线/设置行间距等属性的使用及 slot-scope=“scope“ 的使用案例

    1、 Element-ui 提供 Table 组件情况: 其一、 Element-ui 自提供的 Table 代码情况为(示例的代码): 代码地址: https://element.eleme.cn/#/zh-CN/component/table 其二、页面的显示情况为: 2、目标修改后的情况: 1、 Table 表格设置表头及去除下标线等属性的修改: 其一、代码: 其二、效果展示

    2024年02月11日
    浏览(42)
  • element-ui 表格添加校验

      html片段     js片段 css片段

    2024年02月15日
    浏览(50)
  • element-ui表格Table详解

    先给大家展示一下效果 Table 属性  属性名 说明 类型 可选值 默认值 data 显示的数据 array — — height Table 的高度, 默认为自动高度。 如果 height 为 number 类型,单位 px;如果 height 为 string 类型,则这个高度会设置为 Table 的 style.height 的值,Table 的高度会受控于外部样式。 s

    2024年02月07日
    浏览(47)
  • Element-ui 动态Table表格

    最近在做相关需求,感觉太多的重复代码,网上也很多这种动态的,写的很好,所以我借鉴了很多大佬的动态table表格,结合需求,完成了我自己需要的table。 1.config文件夹相关配置文件 2.一个用来配置的’pageTable.vue’文件 其实table 表格里面的align也可以动态,我这里偷懒了

    2024年02月11日
    浏览(38)
  • Vue+Element-ui实现表格嵌套表格(表头不同)

    data中integrateList根据后端返回的json数据确定,其格式为:

    2024年02月14日
    浏览(66)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包