Как настроить столбец в таблице в vue.js
Как настроить столбец в таблице в vue.js?
Независимо от стилей, как настроить раскрывающееся меню в столбце 6 "Оплачено через" и извлечь данные из "paymentMethod"? Другой способ: используя цикл v-for, есть ли возможность изменить определенный столбец?
Так будет выглядеть до нажатия на выпадающий список
HTML:
<template>
<div class="OrderPage">
<h1 v-text="pageTitle"></h1>
<table>
<thead>
<tr>
<th v-for="column in columns" :key="column">
{{column}}
</th>
</tr>
</thead>
<tbody >
<tr v-for="order in orders" :key="order.orderNumber">
<td v-for="key in columns" :key="key" >
{{order[camelCase(key)]}}
</td>
</tr>
</tbody>
</table>
<ul>
<li v-for="order in orders" :key="order.orderNumber">
{{ order.orderNumber }} - {{ order.name}} {{ order.paidAmount}}
</li>
</ul>
</div>
</template>
Сценарии:
<script>
export default {
name: 'OrderPage',
data () {
return {
pageTitle: 'Group Order',
columns: ['Order Number', 'Type','Name','Plan B','Price','Paid via','Paid','Your Balance','change'],
orders: [
{
orderNumber: '1',
name: 'Mike G',
type: 'type',
planB:'',
price:'12.8',
paidVia:'',
paid:'',
yourBalance:'',
change:''
},
{
orderNumber: '2',
name: 'TJ',
type: 'type',
planB:'',
price:'12.8',
paidVia:'',
paid:'',
yourBalance:'',
change:''
},
{
orderNumber: '3',
name: 'Wendy Chen',
type: 'type',
planB:'',
price:'12.8',
paidVia:'',
paid:'',
yourBalance:'',
change:''
}
],
paymentMethod: ['','Vemo', 'Chase Quick Pay', 'Apple Pay', 'Cash'],
orderType:[
{
'Chicken R':'9',
'Chicken L':'12.85',
'Veggie R': '8',
'Veggie L': '9.65',
'Goat R': '10',
'Goat L': '13.8',
'Goat Tray':'90'
}
]
}
},
methods: {
sortBy: function (key) {
this.sortKey = key
this.sortOrders[key] = this.sortOrders[key] * -1
},
camelCase: function (str) {
return str.charAt(0).toLowerCase()+str.slice(1).replace(/\s+/g,"")
}
}
}
</script>