vue中el-table列表分页倒序排序

Posted 2021-09-29 尔嵘

template：

/*
*   数据过于真实，有些不便于展示，仅供参考思路，大致写法
*  
*/
<el-form
    :inline="true"
    @submit.native.prevent
    @keyup.enter.native="getProtectorList()"
    label-width="120px"
>
    <el-form-item>
        <el-button
          size="small"
          icon="el-icon-search"
          @click="protectorQuerySearch"
          >查询
        </el-button>
    </el-form-item>
</el-form>
<el-table
    :data="protectorList"
    border
     style="width: 100%"
    :stripe="true"
    :max-height="scorllTableHeight"
    :header-cell-style="tableHeaderColor"
    :cell-style="tableColumnStyle"
    @sort-change="sortChange"
>
    <el-table-column
          fixed
          prop="devShowName"
          label="名称"
          header-align="center"
          align="center"
          width="140"
          :show-overflow-tooltip="true"
    ></el-table-column>
    <el-table-column
          fixed
          prop="dbtime"
          label="时间"
          header-align="center"
          align="center"
          min-width="160"
          sortable="custom"
          :show-overflow-tooltip="true"
    ></el-table-column>
    ...
</el-table>
<el-pagination
    style="color: #fff"
    v-if="pageshow"
    :current-page.sync="page"
    :page-sizes="[25, 50, 100, 200]"
    :page-size="limit"
    :total="total"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="pageSizeChangeHandle"
    @current-change="pageCurrentChangeHandle"
></el-pagination>

js：

        (1)先定义data：

data(){
    return:{
        page: 1,
        limit: 50,//分页数
        total: 0,//总数
        sort: "id desc",//默认降序
        pageshow: true,
        protectorList: [],
        scorllTableHeight: window.innerHeight - 220 - 53,
    }
}

        (2)后定义方法：

methods: {
    // 分页, 每页条数
    pageSizeChangeHandle(val) {
      this.page = 1;
      this.limit = val;
      this.pageshow = false;
      this.getProtectorList();
      this.$nextTick(() => {
        this.pageshow = true;
      });
    },
    
    // 分页, 当前页
    pageCurrentChangeHandle(val) {
      this.page = val;
      this.pageshow = false;
      this.getProtectorList();
      this.$nextTick(() => {
        this.pageshow = true;
      });
    },    

    //设置表头行的样式
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return "background-color: #6495ED; color: #fff; text-align:center;";
    },
    
    //设置表格行的样式
    tableColumnStyle({ row, rowIndex }) {
      return "background-color: #fff; color: #000; text-align:center;";
    },

    //排序
    sortChange(column, prop, order) {
        console.log("column",column);
        console.log('prop',prop);
        console.log("order",order)
        // ascending 升序
        this.sort =
            column.order == "ascending"
            ? column.prop + " " + "asc"
            : column.prop + " " + "desc";
        this.getProtectorList();
    },
    
    //查询
    protectorQuerySearch(){
        this.page = 1;
        this.getProtectorList();
    },

    //列表数据
    getProtectorList(){
        let _this = this,queryParams= {},queryUrl = '';
        queryParams['devid'] = _this.dataForm.deviceid;
        queryParams['date'] = _this.dataForm.startTime;
        queryParams['pageNum'] = _this.page;
        queryParams['pageSize'] = _this.limit;
        queryParams['sort'] = _this.sort;//排揎传值
        queryUrl = '/home/protect/data';//并非真实接口
        _this.protectorList = [];
        //qs需要自己去安装，在引入
        _this.$http.post(queryUrl,qs.stringify(queryParams))
            .then(({data: res}) => {
                if(res.code != 0){
                   return _this.$message.error(res.msg);
                }
                if(res.data && res.data.length > 0){
                    let obj = {},data = res.data;//data（res.data）数据结构如下所示
                    for(let item of data){
                        obj = {
                            devShowName: item.devShowName != null ? '--',
                            dbTime: item.dbTime != null ? '--',
                            ...
                        };
                    }
                    _this.protectorList.push(obj);
                }else{
                    _this.$message.warning('查询为空');
                }
            })
            .catch(error=>{
                console.log(error);
            })
    }
}

data(res.data)数据结构如下所示，可以看见前端不需要再去对数据列表降序取值，看时间已经是倒序。

 注意：代码仅供参考，如有不足之处还望评论指出！未达到您的期望还望见谅！