js对html内容进行排序,javascript – 如何使用vue.js对表中的日期进行排序

我通过制作一个TableHeader组件来解决这个问题,它说语义因为我使用了语义ui …对于代码中的spanglish而言,无论如何都必须是同源的.此外,此代码正常,但如果您看到代码/答案的改进,请告诉我！

正如你所看到的,我真的不排在前面……我用排序的项目发出新的请求.

{{ sth.texto }}  _{{{ sth.posicion }}}

export default {

name: "SemanticTableHeader",

props: {

sth : {

type : Object,

default: () => {}

},

sths : {

type : Array,

default: () => { return [] }

},

filtrosOrder : {

type : Array,

default: () => { return [] }

},

isSearching : {

type : Boolean,

required : true

}

},

methods: {

cycleSort(sth, event) {

if(this.isSearching == true){

return false;

}

switch (sth.direction) {

case null:

sth.direction = 'asc';

sth.icon = 'sort ascending';

break;

case 'asc':

sth.direction = 'desc';

sth.icon = 'sort descending';

break;

case 'desc':

sth.direction = null;

sth.icon = 'sort disabled';

break;

default:

sth.direction = null;

sth.icon = 'sort disabled';

}

this.manejaCambioHeader(sth);

},

manejaCambioHeader: _.debounce(function (sth) {

var self = this;

console.log(this.filtrosOrder);

let auxUser = _.find(this.filtrosOrder, function(o) { return o.id == sth.id; });

if( auxUser != null ){

auxUser.direction = sth.direction;

if(auxUser.direction == null){

for (var i=0 ; i < this.filtrosOrder.length ; i++){

if (this.filtrosOrder[i].id === auxUser.id) {

let auxSths = _.find(self.sths, function(o) { return o.id == sth.id; });

auxSths.posicion = 0;

this.filtrosOrder.splice(i, 1);

}

}

}

}else{

this.filtrosOrder.push({ id: sth.id, direction: sth.direction });

}

for (var i=0 ; i < self.filtrosOrder.length; i++){

let auxSths = _.find(this.sths, function(o) { return o.id == self.filtrosOrder[i].id; });

auxSths.posicion = i + 1;

}

console.log(this.filtrosOrder);

this.$emit('sortHeaderChanged', sth);

}, 400),

},

}

th span{

cursor: pointer !important;

-webkit-touch-callout: none; /* iOS Safari */

-webkit-user-select: none; /* Safari */

-khtml-user-select: none; /* Konqueror HTML */

-moz-user-select: none; /* Firefox */

-ms-user-select: none; /* Internet Explorer/Edge */

user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */

}

i.icon{

margin: 0em -0.2em 0em 0em;

}

在我的索引视图中,我只是加载组件并像这样使用它

:sth="sth"

:sths="sths"

:isSearching="isSearching"

:filtrosOrder="filtros.orderBy"

@sortHeaderChanged="fetchIndex"

>

export default {

name: "ContactsIndex",

data:() => ({

filtros:{

orderBy:[

{ id: 'nombre', direction: 'asc' } // orderBy is calculated through the headers component

]

},

sths:[

{ id: 'nombre', texto: 'Nombre', icon: 'sort ascending', direction: 'asc', posicion: 1 },

{ id: 'telefonos', texto: 'Teléfono(s)', icon: 'sort disabled', direction: null, posicion: 0 },

{ id: 'emails', texto: 'Correo Electrónico(s)', icon: 'sort disabled', direction: null, posicion: 0 },

{ id: 'estatus', texto: 'Estatus', icon: 'sort disabled', direction: null, posicion: 0 }

],

contacts: [],

}),

created() {

this.fetchIndex();

},

methods: {

resetFilters() {

// this function is to reset filters and headers

Object.assign(this.$data.filtros, this.$options.data().filtros);

this.$data.sths = this.$options.data().sths;

this.fetchIndex();

},

fetchIndex() {

let self = this;

// this is a wrapper i made for an axios post call you can replace it with a normal call

singleIndexRequest('/api/v1/contacts/index', self).then(response => {

self.contacts = response.data.contacts;

});

},

}

}