element ui table表格属性排序问题sort-change

阳光穿透心脏的1/2处 2021-07-25 18:24 2756阅读 1赞

element ui 中的table有很多功能，最近需要做一个排序的功能。  
如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
点击 ID右侧 或者 商品名称右侧的 上下箭头时，可以实现对应属性的排序。

查找element ui 官方文档发现有此功能：

表格的排序功能：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]  
需要用到的属性有：`sortable`，这个属性需要在`el-table-column`中写入，并且有配套的`prop`  
监听排序则需要在table中监听`sort-change`方法。

代码奉上：

//此处的Key不确定是干啥的~
     <el-table :key="tableKey"  
     //v-loading是用于显示表格中是否在数据请求时显示正在加载中，一般是数据请求时显示，数据请求后不显示
     v-loading="listLoading" 
     //data是表格中的数据
     :data="list" 
     //表格的高度
     :height="screenHeight" 
     //监听属性排序的方法
     @sort-change="sortChange"
     //表格中数据加载时，显示的文字可以进行自定义
          element-loading-text="正在努力加载中..." 
          //表格的边框
          border 
          //表格中宽度是否自动撑开
          fit 
          //表格中的当前行是否高亮显示
          highlight-current-row 
          //表格显示css样式，比如设置宽度
          style="width: 100%">
          //此列为序号，label标签 type是自定义的序号为Index,align是居中/靠左/靠右,show-overflow-tooltip是指：当内容过长被隐藏是显示tooltip，width就是设置宽度
          <el-table-column 
          label="序号" 
          type="index" 
          align="center" 
          show-overflow-tooltip 
          width="50">
          </el-table-column>
          //此列中的sortable prop都是为了属性排序 
          <el-table-column :label="'ID'" align="center" width="164px" :sortable="'custom'" prop="ID">
            <template slot-scope="scope">
              <span>{ {  scope.row.id }}</span>
            </template>
          </el-table-column>
    </el-table>
    
    
    //上方代码中的height,也就是表格的高度是通过页面自动计算出来的，在data中有说明。
    data(){ 
    	return{ 
    		screenHeight: `${ document.documentElement.clientHeight}` - 242,
    	}
    }
    
    
    
    //以下代码放在methods中
    sortChange(column) { 
    	//打印看看参数有哪些？
     	console.log('排序', column.prop, column.order);
     	//排序默认是从第一页开始
    	  this.listQuery.page = 1;
    	  //排序的字段是属性名
    	  this.listQuery.param.sort = column.prop;
    	  //排序的方式是根据上下选择来确定
    	  this.listQuery.param.asc = (column.order == 'ascending' ? true : false);
    	  //此方法为获取数据的方法
    	  this.getPage();
    },
    getPage() { 
    	//表格加载中~
      this.listLoading = true;
      //调用Page接口，传递参数，
      page(this.listQuery).then(response => { 
        this.list = response.result.data;
        this.total = response.result.total;
        //隐藏加载中~
        this.listLoading = false;
      });
    }

## 表格table中属性排序，可以前台排序，也可以后台排序 ##

## 如果需要前台排序，可以将sortable设置为true,或者直接写sortable即可。但是前台排序仅适用于当前页，如果翻页是没有当前排序效果的。 ##

## 如果需要后台排序，可以将sortable设置为custom，然后配合table中的sort-change方法进行调用获取数据的方法来处理。 ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/b5efc8c551f6421ab6f1ab684b5e892a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/d90bf14a6f9b4791beed94ffaf4cca03.png