element-ui 如何多列排序？

Question

element-ui 如何多列排序

问题描述

element 怎么排序多列数据

问题出现的环境背景及自己尝试过哪些方法

这几天在做毕设,然后做的时候选择了element,然后这几天想做个排序功能,跟百度网盘一样,就是文件和目录先排序一遍,然后文件名再排序一遍,文件始终再目录的下面,然后我就去看了官网文档,发现有个sort-by属性可以使用多列排序,但是官方没有给例子,所以我就搜索,发现无论是使用sort-by="['fileName','fileSize']"还是sort-by="[fileName,fileSize]"都不可以

相关代码

这里是我测试的一个代码

<!--
 * @Date: 2020-06-17 22:38:10
 * @LastEditors: WHH
 * @LastEditTime: 2020-06-19 15:08:11
--> 
<template>
  <el-table :data="tableData" height="100%" style="width:100%">
    <el-table-column prop="fileName" label="文件名" sortable sort-by="['fileSize','fileName']"></el-table-column>
    <el-table-column prop="fileSize" label="文件大小" sortable sort-by="[fileSize,fileName]"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      path: "/",
      // tableData: this.test()
      tableData: [
        {
          fileName: "1",
          fileSize: "100"
        },
        {
          fileName: "2",
          fileSize: "100"
        },
        {

          fileName: "6",
          fileSize: "100"
        },
        {
          fileName: "8",
          fileSize: "100"
        },
        {
          fileName: "11",
          fileSize: "200"
        },
        {
          fileName: "12",
          fileSize: "200"
        },
        {
          fileName: "13",
          fileSize: "0000"
        },
        {
          fileName: "14",
          fileSize: "3000"
        },
        {
          fileName: "15",
          fileSize: "100"
        }
      ]
    };
  }
};
</script>

<style>
</style>

感觉并没有多列排序,甚至有时候单列都排不好,不知道那里写了问题

感谢大佬PPxs199的回答,我试了下可以,顺便问下如果想把文件类型固定到底部有没有啥好的办法

<!--
 * @Date: 2020-06-17 22:38:10
 * @LastEditors: WHH
 * @LastEditTime: 2020-06-19 22:52:46
--> 
<template>~~~~
  <el-table :data="tableData" height="100%" style="width:100%">
    <el-table-column prop="directory" label="文件类型" sortable :sort-by="['fileSize', 'fileName']">
      <template slot-scope="scope">{{scope.row.directory?"1":"0"}}</template>
    </el-table-column>
    <el-table-column prop="fileName" label="文件名" sortable :sort-by="['fileSize', 'fileName']"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      path: "/",
      // tableData: this.test()
      tableData: [
        { fileName: "BaiduNetdisk", directory: true },
        { fileName: "Cxxxx.for.Windows-0.8.10-win", directory: true },
        { fileName: "TrafficMonitor", directory: true },
        { fileName: "WeGame", directory: true },
        { fileName: "WinRAR", directory: true },
        { fileName: "WinTop.exe", directory: false },
        { fileName: "小丸工具箱   压制~~~~", directory: true }
      ]
    };
  }
};
</script>~~~~

<style>
</style>

Answer 1

        <el-table-column prop="fileName" label="文件名" sortable :sort-by="['fileSize', 'fileName']"></el-table-column>
        <el-table-column prop="fileSize" label="文件大小" sortable :sort-by="['fileSize', 'fileName']"></el-table-column>