element ui 表格列排序

开发需求形形色色，可能你遇到的问题别人觉得很简单；别人遇到的问题在你这又不算问题！！

我的需求也是让我对表格某两列进行排序，框架element UI；这不很简单了，element 组件文档 上拿来一用不就可以解决问题了！问题是公司大佬不使用原生element，而是又重新封装了下。但是细看了下element 组件文档，其实也非常简单，也不用麻烦大佬了，自己就能解决。

方法1直接在前端页面进行排序；方法2则是在后端SQL语句上排序。

方法1：

但是，要注意的是他需要添加prop，不然这个排序就用不来了。后来加了这个prop解决我的问题。

sortable、default-sort：

问题解决办法：

 具体代码：

html:

<el-card shadow="hover">
        <!-- table -->
        <el-table stripe :data="table.data" style="width: 100%"
                  highlight-current-row size="mini" :default-sort="{prop  : 'cost', order: 'descending'}">
            <el-table-column show-overflow-tooltip type="index" width="40"></el-table-column>

            <el-table-column show-overflow-tooltip :label="col.title" :width="col.width" v-for="col in table.col"
                             :sortable="col.field=='cost' || col.field == 'ctRoi' "
                             :prop="col.field=='cost'?'cost':null || col.field=='ctRoi'?'ctRoi':null ">
                <template slot-scope="scope">
                    <div v-if="col.formatter==undefined">{{scope.row[col.field]}}</div>
                    <div v-if="col.formatter!=undefined && typeof(col.formatter(scope.row[col.field],scope.row))=='string'">
                        {{col.formatter(scope.row[col.field],scope.row)}}
                    </div>
                    <div v-if="col.formatter!=undefined && typeof(col.formatter(scope.row[col.field],scope.row))=='object'">
                        <el-tag :type="col.formatter(scope.row[col.field],scope.row).type" effect="plain"
                                style="width:100%" size="mini">
                            {{col.formatter(scope.row[col.field],scope.row).value}}
                        </el-tag>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="block"> <!-- 页码 -->
            <el-pagination small background
                           @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page.sync="table.sync"
                           :page-sizes="table.pagesizes" :page-size="table.pagesize"
                           layout="total, sizes, prev, pager, next, jumper" :total="table.total">
            </el-pagination>
        </div>
    </el-card>

js:

table: {//表格数据
    "col": [
       {field: "date", title: "日期", width: ""},
       {field: "product", title: "产品", width: ""},
       {field: "advertiserName", title: "账户名称", width: "200px"},
       {field: "advertiserId", title: "账户id", width: "130px"},
       {field: "cost", title: "消耗金额", width: "100px"},
       {field: "income", title: "收入", width: ""},
       {field: "ctRoi", title: "实时roi", width: "100px"},
       {field: "roi", title: "roi0", width: ""},
       {field: "roi1", title: "roi1", width: ""},
       {field: "roi2", title: "roi2", width: ""},
       {field: "roi3", title: "roi3", width: ""},
       {field: "roi7", title: "roi7", width: ""},
       {field: "roi14", title: "roi14", width: ""},
       {field: "roi21", title: "roi21", width: ""},
       {field: "roi30", title: "roi30", width: ""},
     ],
     "pagesizes": [1, 10, 20, 30, 50, 100],//size选择器
     "pagesize ": 10,
     "sync": 1,//当前页数
     "total": 0,
     "data": [],
},

结果：

方法2：

html：

<el-card shadow="hover">
        <!-- table -->
        <el-table stripe :data="table.data" style="width: 100%"
                  highlight-current-row size="mini" :default-sort="{prop  : 'cost', order: 'descending'}" @sort-change="sortChange">
            <el-table-column show-overflow-tooltip type="index" width="40"></el-table-column>

            <el-table-column show-overflow-tooltip :label="col.title" :width="col.width" v-for="col in table.col" 
                :prop="col.field" :sortable="col.sortable==null?false:'custom'">
                <template slot-scope="scope">
                    <div v-if="col.formatter==undefined">{{scope.row[col.field]}}</div>
                    <div v-if="col.formatter!=undefined && typeof(col.formatter(scope.row[col.field],scope.row))=='string'">
                        {{col.formatter(scope.row[col.field],scope.row)}}
                    </div>
                    <div v-if="col.formatter!=undefined && typeof(col.formatter(scope.row[col.field],scope.row))=='object'">
                        <el-tag :type="col.formatter(scope.row[col.field],scope.row).type" effect="plain"
                                style="width:100%" size="mini">
                            {{col.formatter(scope.row[col.field],scope.row).value}}
                        </el-tag>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="block"> <!-- 页码 -->
            <el-pagination small background
                           @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page.sync="table.sync"
                           :page-sizes="table.pagesizes" :page-size="table.pagesize"
                           layout="total, sizes, prev, pager, next, jumper" :total="table.total">
            </el-pagination>
        </div>
    </el-card>

js:

data: {
    param: {//搜索参数
       orderBy: "cost",
       sortOrdeBy: "desc"
   },
   table: {//表格数据
    "col": [
       {field: "date", title: "日期", width: ""},
       {field: "product", title: "产品", width: ""},
       {field: "advertiserName", title: "账户名称", width: "200px"},
       {field: "advertiserId", title: "账户id", width: "130px"},
       {field: "cost", title: "消耗金额", width: "100px", sortable: "custom"},
       {field: "income", title: "收入", width: ""},
       {field: "ctRoi", title: "实时roi", width: "100px", sortable: "custom"},
       {field: "roi", title: "roi0", width: ""},
       {field: "roi1", title: "roi1", width: ""},
       {field: "roi2", title: "roi2", width: ""},
       {field: "roi3", title: "roi3", width: ""},
       {field: "roi7", title: "roi7", width: ""},
       {field: "roi14", title: "roi14", width: ""},
       {field: "roi21", title: "roi21", width: ""},
       {field: "roi30", title: "roi30", width: ""},
     ],
     "pagesizes": [1, 10, 20, 30, 50, 100],//size选择器
     "pagesize ": 10,
     "sync": 1,//当前页数
     "total": 0,
     "data": [],
    },
},

methods: {
    //排序
    sortChange: function (column) {
        this.param.orderBy = column.prop;
        if (column.order == "ascending") {
            this.param.sortOrdeBy = "asc";
         } else {
            this.param.sortOrdeBy = "desc";
         }
         this.load(this.param.pageNumber, this.param.pageSize);
    },
}

sql语句：

SQL语句最后拼接上下面条件

<if test="orderBy == null or orderBy == '' ">
	ORDER BY cost DESC
</if>

<if test="orderBy != null and orderBy !='' and sortOrdeBy!=null and sortOrdeBy!='' ">
	ORDER BY `${orderBy}` ${sortOrdeBy}
</if>

tips：千万要注意的是

 这个传的字段值要与实体类属性名一致。即实体类属性名为startTime,传来的也要是startTime ,不能是start_time；否则就会报错