Как настроить столбец в таблице в 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>

0 ответов

Другие вопросы по тегам