Question

我正在尝试对表中的列进行排序，这些表中的行是在计算属性中计算的。但是，我收到以下错误：

“已分配计算属性'tableData'，但没有设置器。

这是我的计算代码：

 tableData() {
            let convertedData = this.dataOverview
            let newData = _(convertedData)
            .groupBy('conversationSource')
            .map((objs, key) => ({
                'conversationSource': key,
                'conversationCount': _.sumBy(objs, 'conversationCount'),
                'interactive': _.sumBy(objs, 'interactive'),
                'leads': _.sumBy(objs, 'leadsSent'),
                'merchants': _.size(objs, 'merchantName'),
                'merchantId': _.map(objs, 'merchantId'),
                'leadsPercent': _.round((_.sumBy(objs, 'leadsSent') / _.sumBy(objs, 'interactive') || 0) * 100)
                }))
                .value();
                return newData;
        }

这是我用来排序的方法...

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;
            }

这是我的数据。

props: {
        dataOverview: {
            type: Array,
            required: true
        },
    },
    data() {
        return {

            convertedData: [],
            currentSort: 'name',
            currentSortDir: 'asc',
            sortOptions: {
                sortAscending: true,
                currentSortColumn: null
            },

最后..这是我使用tableData的模板

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

        </tr>

当我在mount（）生命周期挂钩上进行数据操作时，sort方法有效。但是该数据会动态更改，因此mount（）无法正常工作。

Answer 1

为了获得更好的样式，我可以编写代码。这是我建议的解决方案。

在方法之内

tableSort(column) {
  return (a, b) => {
    if (a[column.field] < b[column.field]) { return -1; }
    if (a[column.field] > b[column.field]) { return 1; }
    return 0;
  }
}

在计算出的属性之内

tableData() {
    let convertedData = this.dataOverview
    let newData = _(convertedData)
    .groupBy('conversationSource')
    .map((objs, key) => ({
            'conversationSource': key,
            'conversationCount': _.sumBy(objs, 'conversationCount'),
            'interactive': _.sumBy(objs, 'interactive'),
            'leads': _.sumBy(objs, 'leadsSent'),
            'merchants': _.size(objs, 'merchantName'),
            'merchantId': _.map(objs, 'merchantId'),
            'leadsPercent': _.round((_.sumBy(objs, 'leadsSent') / _.sumBy(objs, 'interactive') || 0) * 100)
            }))
            .value();
            return newData.sort(this.tableSort('nameOfColumn'));
}

您甚至可以通过将nameOfColumn设置为变量而不是常量来动态地更改排序

如何在vue.js中对计算所得的属性进行排序？

1 个答案:

在方法之内

在计算出的属性之内