el-table中如何排序？

Question

在el-table-column中加入了sortable,但是如何在label中显示出三个这样的排序呢？

相关代码

    <el-table-column prop="deviceGroupName"sortable :sort-by="['abnormalDevice','onlineDevice', 'totalDevice']"
                     label="设备(异常/在线/总数)"
                     width="300">
                     <template slot-scope="scope">
                         {{ scope.row.abnormalDevice }}/{{ scope.row.onlineDevice }}/{{ scope.row.totalDevice }}
                     </template>
    </el-table-column>

如何能做出像图片这样的效果呢？

Answer 1

你这个应该不好用el-table自带的那个排序了，要自己搞了
字后面跟两个图标，然后点击的时候判断active然后请求后台列表接口
template用slot=header，element要在2.4.11以上，或者用render-header