通過v-for動態創建table，動態渲染表頭資料和表體資料，如何改變表頭資料排序
uj5u.com熱心網友回復：
dengjumingdream:“tableData”: [ { “id”: 15001, “tid”: 15001, “tname”: “林肯”, }, { “id”: 15002, “tid”: 15002, “tname”: “鄧布利多”, } ], “cols”: [ { “label”: “名稱”, “name”: “tname”, “type”: “normal”, “order”: “1”, “readOnly”: “false” }, { “label”: “操作”, “name”: “id”, “type”: “query”, “order”: “3”, “readOnly”: “false” }, { “label”: “id”, “name”: “tid”, “type”: “sort”, “order”: “2”, “readOnly”: “false” } ]
這的確是個很有意思的問題，我覺得這個問題的鍋主要出在element-ui上面，我這里測驗了一下，如果我把所有的el-table-column中的v-if刪掉，那么渲染出的結果是這樣：
螢屏快照 2019-06-18 下午9.18.20.png1798×326 13.5 KB
代碼：
<template>
<div>
<el-table :data="https://bbs.csdn.net/topics/tableData" style="width: 100%">
<tr v-for="(col, index) in cols" :key="index">
<el-table-column :prop="col.name" sortable :label="col.label"></el-table-column>
<el-table-column :prop="col.name" sortable :label="col.label"></el-table-column>
<el-table-column :prop="col.name" sortable :label="col.label"></el-table-column>
</tr>
</el-table>
</div>
</template>
<script>
export default {
name: 'ElementUI',
data () {
return {
tableData: [
{
'id': 15001,
'tid': 15001,
'tname': '林肯'
},
{
'id': 15002,
'tid': 15002,
'tname': '鄧布利多'
}
],
cols: [
{
'label': '名稱',
'name': 'tname',
'type': 'normal',
'order': '1',
'readOnly': 'false'
},
{
'label': '操作',
'name': 'id',
'type': 'query',
'order': '3',
'readOnly': 'false'
},
{
'label': 'id',
'name': 'tid',
'type': 'sort',
'order': '2',
'readOnly': 'false'
}
]
}
}
}
</script>
加上v-if后就變成了這樣：
螢屏快照 2019-06-18 下午9.18.29.png1522×350 12.5 KB
我測驗了很多組資料，發現每次都是將第一個元素渲染到了最后面，其他元素依照正常的順序渲染。意思就是說，如果元素的順序是1-2-3-4-5，那么渲染出來的應該是2-3-4-5-1。
orz雖然我也搞不太懂這是怎么回事（看了半天element-ui中table.vue的源代碼也沒定義到問題所在，還是太菜了），但是我覺得這大概率是element-ui的鍋。如果只是為了將名稱改到第一個的話，我們只需要修改下cols陣列的順序即可。
uj5u.com熱心網友回復：
如果我沒理解錯的話= =，你應該是想要實作“一個串列中有多個資料項，每個資料項有表頭資料和表體資料，我們根據表頭資料進行排序，使用v-for呈現排序后的串列資料”這個樣子吧。如果是這樣的話其實問題關鍵在于根據表頭資料排序。這個使用Array.sort()方法就可以了。
這里寫了一個vue組件，可以參考下。
<template>
<div>
<div class="row">
<div @click="sortByAttribute('title')" class="title">表頭</div>
<div @click="sortByAttribute('content')" class="content">表內容</div>
</div>
<div class="row" v-for="(item, index) in dataList" v-bind:key="index">
<div class="title">{{item.title}}</div>
<div class="content">{{item.content}}</div>
</div>
</div>
</template>
<script>
export default {
name: 'SortTable',
methods: {
sortByAttribute: function (property) {
// 定義一個比較函式，作為Array.sort方法的引數，可以直接用于比較
const compare = (propertyName) => {
return function (object1, object2) {
const value1 = object1[propertyName]
const value2 = object2[propertyName]
if (value2 > value1) {
return -1
} else if (value2 < value1) {
return 1
} else {
return 0
}
}
}
// 呼叫sort方法進行排序
this.dataList.sort(
compare(property)
)
}
},
data () {
return {
dataList: [
{title: 2, content: '78'},
{title: 1, content: '34'},
{title: 3, content: '12'},
{title: 4, content: '56'}
]
}
}
}
</script>
<style scoped>
.row {
border-bottom: black 1px solid;
display: flex;
flex-direction: row;
}
.title {
width: 20vw;
margin: 1vh 5vw;
}
.content {
width: 60vw;
margin: 1vh 5vw;
}
</style>
關鍵在sortByAttribute方法中。
dataList為亂序的串列。
效果：
根據表頭排序的結果：
螢屏快照 2019-06-17 下午2.59.33.png1292×472 5.62 KB
同樣我們還可以根據表體排序：
螢屏快照 2019-06-17 下午3.00.49.png1218×490 5.63 KB
uj5u.com熱心網友回復：
嗯嗯，謝謝了:smile:uj5u.com熱心網友回復：
shadowingszy:item
首先謝謝您，您理解是對的，
<el-table :data="https://bbs.csdn.net/topics/tableData" style="width: 100%">
<tr v-for="col in cols">
<el-table-column v-if="col.type==='normal'" :prop="col.name":label="col.lable">
</el-table-column>
<el-table-column v-if="col.type==='sort'" :prop="col.name" sortable :label="col.lable">
<template scope="scope"><el-tag type="primary">{{ scope.row.type }}</el-tag>
</template>
</el-table-column>
<el-table-column v-if="col.type==='query'" :prop="col.id" sortable :label="col.lable">
<template scope="scope">
<el-button @click="editInfo(scope.row.id)" type="text" size="small">編輯</el-button>
</template>
</el-table-column>
<el-table-column v-if="col.type==='update'" :prop="col.id" sortable :label="col.lable">
<template scope="scope">
<el-button @click="deleInfo(scope.row.id)" type="text" size="small">洗掉</el-button>
</template>
</el-table-column>
</tr>
</el-table>
"tableData": [
{
"id": 15001,
"tid": 15001,
"tname": "林肯",
},
{
"id": 15002,
"tid": 15002,
"tname": "鄧布利多",
}
],
"cols": [
{ "label": "名稱",
"name": "tname",
"type": "normal",
"order": "1",
"readOnly": "false"
},
{
"label": "操作",
"name": "id",
"type": "query",
"order": "3",
"readOnly": "false"
},
{
"label": "id",
"name": "tid",
"type": "sort",
"order": "2",
"readOnly": "false"
}
]
},
我現在的問題是cols中名稱在陣列中是排第一位置的，但是渲染出來之后變成了最后一列了，當然這并不影響我的操作，我只是不知道這個問題的出現是為什么？是因為 vue_table的渲染么？
uj5u.com熱心網友回復：
我今天，又測驗了一次，將<tr v-for="(col, index) in cols">
修改為
<template v-for="(col, index) in cols">
則排序方式，就不會出現 2-3-4-5-1的情況了
uj5u.com熱心網友回復：
謝謝樓主 但是為什么呢
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/129596.html
標籤：其他技術討論專區