默认情况下,我需要一些通过日期列对表格进行排序的帮助。现在看来,表已排序,然后再加载数据。当我单击日期表标题时,它会颠倒标题中的排序箭头,而不是数据。当我再单击一次时,数据也会反转。
这是我当前的.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>
我希望有人可以给我一个线索?