vue根据表头渲染数据
2019-02-25 本文已影响0人
豪_5dbc
需要渲染的数据
data: {
tableData: {
thead: {
num: '数字',
chinese: '中文',
english:'英文'
},
tbody: [
{chinese: '一', num: 1, english: 'one'},
{chinese: '二', num: 2, english: 'two'},
{english: 'three', chinese: '三', num: 3}
]
}
}
tbody数据中的key是乱序。
直接渲染效果
| 数字 | 中文 | 英文 |
|---|---|---|
| 一 | 1 | one |
| 二 | 2 | two |
| three | 三 | 3 |
<table>
<thead>
<tr>
<th v-for="item in tableData.thead">{{item}}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in tableData.tbody">
<td v-for="item in row">{{item}}</td>
</tr>
</tbody>
</table>
期望的效果
| 数字 | 中文 | 英文 |
|---|---|---|
| 1 | 一 | one |
| 2 | 二 | two |
| 3 | 三 | three |
<table>
<table>
<thead>
<tr>
<th v-for="item in tableData.thead">{{item}}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in tableData.tbody">
<td v-for="(item, key) in tableData.thead">{{row[key]}}</td>
</tr>
</tbody>
</table>
取出每一行的json数据
<tr v-for="row in tableData.tbody">
取表头数据的key
<td v-for="(item, key) in tableData.thead">
根据thead中key，渲染每一行json数据
{{ row[key] }}
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th v-for="item in tableData.thead">{{item}}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in tableData.tbody">
<td v-for="item in row">{{item}}</td>
</tr>
</tbody>
</table>
<br/>
<table>
<thead>
<tr>
<th v-for="item in tableData.thead">{{item}}</th>
</tr>
</thead>
<tbody>
<tr v-for="row in tableData.tbody">
<td v-for="(item, key) in tableData.thead">{{row[key]}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
tableData: {
thead: {
num: '数字',
chinese: '中文',
english: '英文'
},
tbody: [{
chinese: '一',
num: 1,
english: 'one'
},
{
chinese: '二',
num: 2,
english: 'two'
},
{
english: 'three',
chinese: '三',
num: 3
}
]
}
}
})
</script>
</body>
</html>
看了很多技术文章，自己也尝试写一下。感觉有些地方表述不够清晰，以后继续努力。
