vue里面处理表格排序的问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue里面处理表格排序的问题相关的知识，希望对你有一定的参考价值。
参考技术A <el-table @sort-change="sortChangeJF" v-show="tableData.tableBody.length> 0" :data="tablePageData" :pagination="pagination" border style="width: 100%" max-height="440"><el-table-column prop="fanId" type="selection" align="center" width="55"></el-table-column>
<el-table-column sortable='custom' fixed style="bottom:7px;" prop="产品型号" align="left" label="产品型号" width="150"></el-table-column>
<el-table-column prop="功率曲线及推力系数" label="功率曲线及推力系数" align="center" width="180" v-if="showEcharts">
<template slot-scope="scope">
<el-button size="mini" type="primary" plain @click="btnChartDown(scope.row)">查看图表</el-button>
</template>
</el-table-column>
<el-table-column v-if="showPT" sortable='custom' prop="平台" align="center" label="平台"></el-table-column>
<el-table-column v-if="showDWSFMJ" width="180"
sortable='custom' prop="单位扫风面积成本指数" align="center" label="单位扫风面积成本指数"></el-table-column>
</el-table>
//分页
pagination:
currentPage: 1,
pageSize: 8
,
sortChangeJF(val)
this.sortChange(val, this.tableData,this.pagination)
,
sortChange(val,table,pagination)
let column, prop, order = val
if(!order)
table.tableBody = this.copyArr(table.allData)
pagination.currentPage = 1
return
let flag = order == "ascending" ? 1 : -1
if("平台" == prop || "单位扫风面积成本指数" == prop || "轮毂高度" == prop)
table.tableBody.sort(function(a,b)
return flag * (a[prop] - b[prop])
)
else if("单机容量" == prop)
table.tableBody.sort(function(a,b)
return flag * (parseFloat(a[prop]) - parseFloat(b[prop]))
)
else
table.tableBody.sort(function(a,b)
return flag * (a[prop] > b[prop])
)
pagination.currentPage = 1
,
如何使用 vue.js 对表格中的日期进行排序
【中文标题】如何使用 vue.js 对表格中的日期进行排序【英文标题】：How to sort dates in table using vue.js 【发布时间】：2016-07-22 01:11:59 【问题描述】：我的表格是基于 Vue.js 网站中的 Grid Component Example
我在对表格中的日期进行排序时遇到问题。我从服务器端获取所有表数据作为 JSON。所以在提供的代码中，我只是模拟了 var mockDataFromServerSide 中的数据。
这里是代码：https://jsfiddle.net/5w1wzhvw/3/
HTML 文件：
<!-- component template -->
<script type="text/x-template" id="grid-template">
<table>
<thead>
<tr>
<th v-for="key in columns"
v-on:click="sortBy(key)"
:class="active: sortKey == key">
key | capitalize
<span class="arrow"
:class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="
entry in data
| filterBy filterKey
| orderBy sortKey sortOrders[sortKey]">
<td v-for="key in columns">
entry[key]
</td>
</tr>
</tbody>
</table>
</script>
<!-- demo root element -->
<div id="demo">
<form id="search">
Search <input name="query" v-model="searchQuery">
</form>
<demo-grid
:filter-key="searchQuery">
</demo-grid>
</div>
js文件：
var gridColumns = ['name', 'date'];
var mockDataFromServerSide = [
name: 'Chuck Norris', date: "01 Dec 2016" ,
name: 'Bruce Lee', date: "23 Apr 2005" ,
name: 'Jackie C', date: "30 Jan 2012" ,
name: 'Jet Li', date: "20 Apr 2006"
];
// register the grid component
Vue.component('demo-grid',
template: '#grid-template',
props:
filterKey: String
,
data: function ()
var sortOrders =
gridColumns.forEach(function (key)
sortOrders[key] = 1
)
return
sortKey: '',
sortOrders: sortOrders,
columns: gridColumns,
data: mockDataFromServerSide
,
methods:
sortBy: function (key)
this.sortKey = key
this.sortOrders[key] = this.sortOrders[key] * -1
)
// bootstrap the demo
var demo = new Vue(
el: '#demo',
data:
searchQuery: ''
)
我还尝试为日期添加过滤器。排序正确，但显示的日期显示为“Thu Apr 02 2016 00:00:00 GMT+0800 (China Standard Time)”。我希望日期显示为 2016 年 4 月 2 日。
添加过滤器代码：https://jsfiddle.net/kr1m5de5/1/
HTML 文件（添加过滤器）：
<!-- component template -->
<script type="text/x-template" id="grid-template">
<table>
<thead>
<tr>
<th v-for="key in columns"
v-on:click="sortBy(key)"
:class="active: sortKey == key">
key | capitalize
<span class="arrow"
:class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="
entry in data
| filterBy filterKey
| orderBy sortKey sortOrders[sortKey]
| datesFilter">
<td v-for="key in columns">
entry[key]
</td>
</tr>
</tbody>
</table>
</script>
<!-- demo root element -->
<div id="demo">
<form id="search">
Search <input name="query" v-model="searchQuery">
</form>
<demo-grid
:filter-key="searchQuery">
</demo-grid>
</div>
JS 文件（添加过滤器）：
var gridColumns = ['name', 'date'];
var mockDataFromServerSide = [
name: 'Chuck Norris', date: "01 Dec 2016" ,
name: 'Bruce Lee', date: "23 Apr 2005" ,
name: 'Jackie C', date: "30 Jan 2012" ,
name: 'Jet Li', date: "20 Apr 2006"
];
// register the grid component
Vue.component('demo-grid',
template: '#grid-template',
props:
filterKey: String
,
filters:
datesFilter: function (data)
data.forEach(function (row)
row.date = new Date(row.date);
);
return data;
,
data: function ()
var sortOrders =
gridColumns.forEach(function (key)
sortOrders[key] = 1
)
return
sortKey: '',
sortOrders: sortOrders,
columns: gridColumns,
data: mockDataFromServerSide
,
methods:
sortBy: function (key)
this.sortKey = key
this.sortOrders[key] = this.sortOrders[key] * -1
)
// bootstrap the demo
var demo = new Vue(
el: '#demo',
data:
searchQuery: ''
)
请告诉我如何解决它或者是否有更好的方法。
【问题讨论】：
我正在考虑为日期列添加特殊的 sortFunction 并在mockDataFromServerSide 中使用属性或隐藏列，但我还没有解决。
我很尴尬，我用你的 jsfiddle 作为我刚刚回答的起点，就像一年半前一样......那时我什至没有 *** 帐户，你可能没有甚至不再需要这个了:'(
【参考方案1】：
我通过制作一个TableHeader 组件解决了这个问题，它说语义原因我使用了语义-ui...对不起代码中的西班牙语，无论如何它们必须是同源的。此外，此代码正在运行，但如果您看到代码/答案的改进，请告诉我！
如您所见，我真的没有在前面排序...我对排序后的项目提出新的请求。
<template>
<th @click="cycleSort(sth, $event)">
<span><span> sth.texto </span><i class="icon" :class="sth.icon"></i><sub v-if="sth.posicion > 0"><small> sth.posicion </small></sub></span>
</th>
</template>
<script>
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),
,
</script>
<style lang="css" scoped>
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;
</style>
在我的索引视图中，我只是加载组件并像这样使用它
<template>
<table>
<thead>
<tr>
<semantic-table-header v-for="sth in sths" :key="sth.key"
:sth="sth"
:sths="sths"
:isSearching="isSearching"
:filtrosOrder="filtros.orderBy"
@sortHeaderChanged="fetchIndex"
></semantic-table-header>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="contact in contacts" :key="contact.key" :class="[contact.justAdded ? 'justAdded' : '']">
</tr>
</tbody>
</table>
</template>
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;
);
,
【讨论】：
以上是关于vue里面处理表格排序的问题的主要内容，如果未能解决你的问题，请参考以下文章