加载数据后按日期对vue表进行排序

时间:2018-11-26 07:51:30

标签: sorting vue.js axios

默认情况下,我需要一些通过日期列对表格进行排序的帮助。现在看来,表已排序,然后再加载数据。当我单击日期表标题时,它会颠倒标题中的排序箭头,而不是数据。当我再单击一次时,数据也会反转。

这是我当前的.vue文件:

<template>
  <div class="hello">
      <div>
        <md-table v-model="searched" md-card md-fixed-header md-sort="LatestCall" md-sort-order="asc">
          <md-table-toolbar>
            <h1 class="md-title">Overvågning</h1>
            <md-field md-clearable class="md-toolbar-section-end">
              <md-input placeholder="Søg efter Navn..." v-model="search" @input="searchOnTable" />
            </md-field>
          </md-table-toolbar>

          <md-table-empty-state
            md-label="Ingen resultater"
            :md-description="`Ingen resultater '${search}'.`">
          </md-table-empty-state>

          <md-table-row slot="md-table-row" slot-scope="{ item }">
            <md-table-cell md-label="Lokal nummer" md-sort-by="LocalNumber" md-numeric>{{ item.LocalNumber }}</md-table-cell>
            <md-table-cell md-label="Seneste kald" md-sort-by="LatestCall"> {{moment(item.LatestCall).format('DD/MM/YYYY HH:MM:ss')}} </md-table-cell>
            <md-table-cell md-label="Navn" md-sort-by="Name">{{ item.Name }}</md-table-cell>
            <md-table-cell md-label="Beskrivelse" md-sort-by="Description">{{ item.Description }}</md-table-cell>
            <md-table-cell md-label="A-Nummer" md-sort-by="ANumber">{{ item.ANumber }}</md-table-cell>
            <md-table-cell md-label="B-Nummer" md-sort-by="BNumber">{{ item.BNumber }}</md-table-cell>
            <md-table-cell md-label="Lokal Nummer" md-sort-by="PhoneLocalNumber">{{ item.PhoneLocalNumber }}</md-table-cell>
          </md-table-row>
        </md-table>
      </div>
  </div>
</template>



<script>

  const toLower = text => {
    return text.toString().toLowerCase()
  }

  const searchByName = (data, term) => {
      data = data.filter(item => toLower(item.Name).includes(toLower(term)))
      return data
  }

import axios from 'axios'
export default {
  name: 'elevators',
  data() {
    return {
      phones: [],
      searched: [],
      search: null
    }
  },
  methods: {
      searchOnTable () {
        this.searched = searchByName(this.phones, this.search)
      },
  },
  created() {
    axios
      .get('http://172.31.12.227/6773/GetLatestCallForeachEmp.php')
      .then(response => {
        this.phones = response.data
        this.searched = response.data
      })
  }
}
</script>   

我希望有人可以给我一个线索?

0 个答案:

没有答案