el-table前端排序

el-table前端排序

呈现样式

html代码

   <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        :default-expand-all="false"
        @sort-change="tableSort"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      >
        <el-table-column prop="name" label="高校" width="180"></el-table-column>
        <el-table-column prop="resumeNumber" label="简历人数" :sortable="'custom'" width="180"></el-table-column>
        <el-table-column prop="employmentNumber" label="就业人数" :sortable="'custom'"></el-table-column>
        <el-table-column prop="averageSalary" label="平均薪资" sortable></el-table-column>
      </el-table>

js代码

  tableData: [
        {
          id: "1",
          name: "北大",
          resumeNumber: "100",
          employmentNumber: "120",
          averageSalary: "6000"
          children: [
            {
              id: "11",
              name: "java",
              resumeNumber: "300",
              employmentNumber: "120",
              averageSalary: "6000"
            },
            {
              id: "12",
              name: "前端",
              resumeNumber: "260",
              employmentNumber: "100",
              averageSalary: "6000"
            }
          ]
        },
        {
          id: "2",
          name: "清华",
          resumeNumber: "120",
          employmentNumber: "100",
          averageSalary: "6000"
          children: [
            {
              id: "21",
              name: "java",
              resumeNumber: "300",
              employmentNumber: "120",
              averageSalary: "6000"
            },
            {
              id: "22",
              name: "前端",
              resumeNumber: "260",
              employmentNumber: "100",
              averageSalary: "6000"
            }
          ]
        }
      ]

排序方法

   // 表格排序
    tableSort(column, column1) {
      //获取需要排序的字段名称和排序类型
      var fieldName = column.prop;
      var sortingType = column.order;
      if (sortingType === "ascending") {
       //升序
        this.tableData = this.tableData.sort(
          (a, b) => a[fieldName] - b[fieldName]
        );
      } else if (sortingType  === "descending") {
      //降序
        this.tableData = this.tableData.sort(
          (a, b) => b[fieldName] - a[fieldName]
        );
      }
    },