element-ui table排序sortable三种状态,怎么去掉默认状态

简介: 在 element-ui 中,也定义了 sort-orders 有三种状态: ascending、descending、null,这三种状态形成一个循环切换。

在调用table 排序时,出现排序有三种状态:


在  element-ui 中,也定义了 sort-orders 有三种状态: ascending、descending、null,这三种状态形成一个循环切换。


案例如下:

 

<el-table
        ref="multipleTable"
        :data="tableData3"
        tooltip-effect="dark"
        style="width: 100%;cursor: pointer;"
        :default-sort = "{prop: 'name', order: 'ascending'}"
        @sort-change="handleSortChange"> 
        <el-table-column
          label="上次更新"
          prop="last_modification_times"
          sortable
          width="100">
        </el-table-column> 
    </el-table>


@sort-change 事件:表格的排序条件发生变化的时触发,参数 { column, prop, order }, 分别代表的意义是:

column:当前列

prop:当前列需要排序的数据

order:排序的规则(升序、降序和默认[默认就是没排序])

 

handleSortChange(val) {
      if(val.column){
        this.sortOrder = val.order == 'ascending'? 2 : 1
        this.sortField = val.prop == 'name'? 2 : 1
        //调用排序接口
      }
      // this.$refs.multipleTable.clearSort()
    },

default-sort属性:


更新 2021.02.17

element-ui 官网现在提供了 sortable 参数:对应列是否可以排序,如果设置为 'custom',则代表用户希望远程排序,需要监听 Table 的 sort-change 事件。

sort-orders:数据在排序时所使用排序策略的轮转顺序,仅当 sortable 为 true 时有效。需传入一个数组,随着用户点击表头,该列依次按照数组中元素的顺序进行排序。数组中的元素需为以下三者之一:ascending表示升序,descending表示降序,null 表示还原为原始顺序。如果不想要默认状态,那只需配置 ['ascending', 'descending'] 即可。

相关文章
|
6月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
|
JavaScript
Vue Antdv 列表(table、list)自定义空数据状态UI
Vue Antdv 列表(table、list)自定义空数据状态UI
591 0
|
6月前
|
前端开发
使用element-ui中的table时,当有多选又有翻页功能时,点击翻页后之前选中的数据丢失
使用element-ui中的table时,当有多选又有翻页功能时,点击翻页后之前选中的数据丢失
181 0
|
2月前
|
JavaScript
element-ui table表格多选后再打开默认选中
element-ui table表格多选后再打开默认选中
|
3月前
|
JavaScript 前端开发 Shell
Element-ui Table表格导出功能的实现
Element-ui Table表格导出功能的实现
53 0
|
6月前
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
【UI】 vue2 修改elementui 表格table 为空时暂无数据样式
358 1
|
6月前
基于sortablejs实现拖拽element-ui el-table表格行进行排序
基于sortablejs实现拖拽element-ui el-table表格行进行排序
|
Web App开发 前端开发 JavaScript
SAP UI5 应用开发教程之六十四 - 基于 OData V4 的 SAP UI5 表格控件如何实现 filter(过滤) 和 sort(排序)功能试读版
SAP UI5 应用开发教程之六十四 - 基于 OData V4 的 SAP UI5 表格控件如何实现 filter(过滤) 和 sort(排序)功能试读版
SAP UI5 应用开发教程之六十四 - 基于 OData V4 的 SAP UI5 表格控件如何实现 filter(过滤) 和 sort(排序)功能试读版
|
12月前
Element UI 中table的验证
Element UI 中table的验证
|
JSON JavaScript 前端开发
用 SAP UI5 Select 控件(下拉列表),来驱动表格控件(Table)刷新的一个实战例子试读版
用 SAP UI5 Select 控件(下拉列表),来驱动表格控件(Table)刷新的一个实战例子试读版