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

Question

我有一个表格，我想在 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>

这是我的列数据。

 columns: [
        { label: this.$t('reporting.source'), field: 'conversationSource' },
          { label: this.$t('reporting.accountsWithActivity'), field: 'accounts', align: 'center', type: 'icon' },
          { label: this.$t('reporting.answerableConversations'), field: 'conversationCount', type: 'boolean', align: 'center' },
          { label: this.$t('reporting.interactiveConversations'), field: 'interactive', type: 'boolean', align: 'center' },
          { label: this.$t('reporting.leads'), field: 'leads', align: 'center' },
          { label: this.$t('reporting.interactiveLeadConversations'), field: 'leadsPercent', type: 'date' },
          { field: 'blank' },
      ]

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

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() {}
    }

Answer 1

在创建的生命周期挂钩 Docs 上触发您的排序方法

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

methods: { 
    //your component methods
},

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