element UI 表格table多个数值进行排序筛选

效果图

1.表格html部分

<el-table   v-loading="loading"   element-loading-text="加载数据中"   :data="tableData"   border   //状态筛选   @filter-change="handleFilterChange"   //分数和时间筛选   @sort-change="changeTableSort"   :row-class-name="addRowClass"   //全选   @selection-change="handleSelectionChange" > //此处放一部分 //分数 <el-table-column    prop="score"    :resizable="false"    label="分数"    sortable="custom"    min-width="8%"> </el-table-column> //状态 <el-table-column   prop="status_name"   column-key="status_name"   label="状态"   min-width="10%"   :resizable="false"   :filter-multiple="false"   :filters="[     { text: '待审核', value: '10' },     { text: '已通过', value: '20' },     // { text: '草稿箱', value: '50' },     { text: '已驳回', value: '30' },     { text: '已下架', value: '40' }   ]"   filter-placement="bottom-end"> 	<template slot-scope="scope"> 	    <el-tag 	      :type="scope.row.status_name == '待审核' ? 'primary' : ''" 	      :class="'aritcleState' + scope.row.status" 	      disable-transitions 	    >{{ scope.row.status_name }} 	    </el-tag> 	  </template> 	</el-table-column> //时间 <el-table-column   prop="create_time"   :resizable="false"   label="提交时间"   sortable="custom"   min-width="11%"> 	 <template slot-scope="scope"> 	   <span>{{ scope.row.create_time }}</span> 	 </template> 	</el-table-column> </el-table> 

2.dom

//状态筛选 handleFilterChange(value) { //判断筛选的字段 if (value.is_first) {     let firstVal = value.is_first.join(",");     this.firstStat = firstVal;     //请求     this.pageLoadList();   } }  //时间和分数筛选 changeTableSort({ column, prop, order }) { 	let sortSign = "";     let updataSign = "";     let sortArr = [];     let updataArr = [];     //分数     if (prop == "score") {     //降序      if (order == "descending") {        scoreSign = "DESC";        scoreArr = { score: scoreSign };        this.sortArrData = JSON.stringify(scoreArr);      } else {      //升序        scoreSign = "ASC";        scoreArr = { score: scoreSign };        this.sortArrData = JSON.stringify(scoreArr);      }      //请求      this.pageLoadList();    } else if (prop == "create_time") {  //时间    if (order == "descending") {        sortSign = "DESC";        sortArr = { create_time: sortSign };        this.sortArrData = JSON.stringify(sortArr);      } else {        sortSign = "ASC";        sortArr = { create_time: sortSign };        this.sortArrData = JSON.stringify(sortArr);      }      this.pageLoadList();    } }