Question

我正在为表格创建排序逻辑。

我现在所拥有的：

可以点击表格标题对数据进行排序：
<th @click="sort(sortParams.created_at)">Date</th>

可排序的方法：

sort(param) {
    let that = this
    axios.get(process.env.API_BASE_URL + process.env.API_BASE_VERSION + 'data?sort=' + param + '&page=' + that.tableData.current_page)
        .then(function (response) {
            that.tableData = response.data
        })
}

存储所有排序参数的对象：

sortParams: {
    default: '-created_at',
    id: 'id',
    created_at: 'created_at',
}

我想做的是：通过axios成功获取数据后，对排序参数进行反向排序。
我的意思是如果它是sortParams.id = 'id'，则可能会更改为sortParams.id = '-id'。
我做了一个可以解决这个问题的方法：

reverseSortParam(param) {
    if (param.charAt(0) === '-') {
        return param.replace('-', '')
    }
    return '-' + param
}

如何在reverseSortParam()中使用sort()？我的意思是，sort()仅接受字符串值，并且我需要以某种方式将字符串值的源传递给reverseSortParam()。

UPD：一些shitcode可能有效，但是在我的项目中没有放置它的地方

<th @click="sort(sortParams.created_at, 'created_at')">Date</th>`

sort(param, paramName) {
    let that = this
    axios.get(process.env.API_BASE_URL + process.env.API_BASE_VERSION + 'data?sort=' + param + '&page=' + that.tableData.current_page)
        .then(function (response) {
            that.tableData = response.data
            that.sortParams[paramName] = that.reverseSortParam(param)
        })
}

JSFiddle

Answer 1

我认为您对此进行了过度设计。您将保留潜在的将来排序参数表，而不是当前状态。您还希望基于值更改该表。最重要的是，您目前只能对单个属性进行排序，但保持（先前的）排序状态，实际上会对使用该属性的用户造成随机行为。

考虑更改以下内容：

data () {
  return {
    // Maps local names to api names
    sortMap: {
      created_at: 'created_at',
      time: 'datetime',
      id: 'id'
    },

    // The default sort
    sortParam: 'created_at'
  },

  methods: {
    async sort (localName) {
      // Figure out if we need to inverse the current sort
      const currentSort = this.sortParam.replace('-', '');

      // Set the current sort
      if (currentSort === this.sortMap[localName]) {
        this.sortParam = `-${this.sortParam}`.replace('--', '');
      } else {
        this.sortParam = this.sortMap[localName];
      }

      this.getData()
    },

    async getData () {
      // You probably want to factor out the api calls to their own file anyway
      this.tableData = await axios.get(..).data
    }
  }
}

现在，您不必将逻辑分散在各处，而只需从模板中调用sort('created_at')。该方法可确保我们使用正确的排序参数，在这种情况下，getData()使用此排序参数

返回并设置反转值

1 个答案: