Javascript 如何在Vue.js中对页面加载中的表列进行排序？

我有一个表，我想在Vue.js的页面加载中按特定列（升序）排序。我如何着手实施这一点

这是我的html

<table class="dash-table">
      <thead class="dash-table-head">
        <tr class="dash-table-mainHead">
          <th
            v-for="(column, key) in columns"
            :key="key"
            @click="sortTable(column)"
          >{{ column.label }}
            <br>
            <i
              v-if="sortOptions.currentSortColumn === column.field"
              :class="sortOptions.sortAscending ? icons.up : icons.down"
              class="sort-icon" />
          </th>

<tbody>
        <tr
          v-for="(row, key) in tableData"
          :key="key"
          class>
          <td>
            <span>{{ row.conversationSource }}</span>
          </td>
          <td>{{ row.accounts }}</td>
          <td>{{ row.conversationCount }}</td>
          <td>{{ row.interactive }}</td>
          <td>{{ row.leads }}</td>
          <td>{{ row.leadsPercent }}%</td>
          <td>&nbsp;</td>
        </tr>
      </tbody>

这是我的排序方法，当单击某个列时触发

methods: {
    sortTable(column) {
      let sortedData = [];
      sortedData = this.tableData.sort((a, b) => {
        if (a[column.field] < b[column.field]) {
          return -1;
        }
        if (a[column.field] > b[column.field]) {
          return 1;
        }
        return 0;
      });

      if (
        !this.sortOptions.currentSortColumn ||
        this.sortOptions.currentSortColumn !== column.field
      ) {
        this.tableData = sortedData;
        this.sortOptions.sortAscending = true;
        this.sortOptions.currentSortColumn = column.field;
        return;
      }

      this.sortOptions.sortAscending
        ? (this.tableData = sortedData.reverse())
        : (this.tableData = sortedData);

      this.sortOptions.sortAscending = !this.sortOptions.sortAscending;
      this.sortOptions.currentSortColumn = column.field;
    }
  }
};

---

在创建的生命周期挂钩上启动排序方法

数据：{
返回：{
//您的组件数据在这里
}
},
方法：{
//您的组件方法
},
创建（）{
此。可排序（“”）；
}

在创建的生命周期挂钩上启动排序方法

数据：{
返回：{
//您的组件数据在这里
}
},
方法：{
//您的组件方法
},
创建（）{
此。可排序（“”）；
}

methods: {
    sortTable(column) {
      let sortedData = [];
      sortedData = this.tableData.sort((a, b) => {
        if (a[column.field] < b[column.field]) {
          return -1;
        }
        if (a[column.field] > b[column.field]) {
          return 1;
        }
        return 0;
      });

      if (
        !this.sortOptions.currentSortColumn ||
        this.sortOptions.currentSortColumn !== column.field
      ) {
        this.tableData = sortedData;
        this.sortOptions.sortAscending = true;
        this.sortOptions.currentSortColumn = column.field;
        return;
      }

      this.sortOptions.sortAscending
        ? (this.tableData = sortedData.reverse())
        : (this.tableData = sortedData);

      this.sortOptions.sortAscending = !this.sortOptions.sortAscending;
      this.sortOptions.currentSortColumn = column.field;
    }
  }
};

 tableData: {
      get() {
          let convertedData = this.dataOverview
          console.log(convertedData);
          let sumResult =
          _(convertedData)
          .groupBy('conversationSource')
          .map((objs, key) => ({
              'conversationSource': key,
              'conversationCount': _.sumBy(objs, 'conversationCount'),
              'interactive': _.sumBy(objs, 'interactive'),
              'leads': _.sumBy(objs, 'leadsSent'),
              'accounts': _.size(objs, 'merchantName'),
              'leadsPercent': _.round((_.sumBy(objs, 'leadsSent') / _.sumBy(objs, 'interactive') || 0) * 100)
              }))
              .value();
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        return (this.convertedData = sumResult);
      },
      set() {}
    }

data: {
   return: {
      // your component data goes here
   }
},

methods: { 
    //your component methods
},

created(){
    this.sortTable('<Column Name>');
}