javascript - 在 Vuejs 中使用带有动态键的 v-for

Question

我正在我的 Vuejs 应用程序中构建一个公共(public)表格组件，如下所示:

表格组件:

<template>
    <div>
        <table class="table">
                <thead>
                <tr>
                    <th v-for="item in headers">
                        {{ item }}
                    </th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item, index) in contents">
                    <th scope="row">
                        {{ index+1 }}
                    </th>
                    <td>
                        {{ item.first_name }}
                    </td>
                    <td>
                        {{ item.last_name }}
                    </td>
                    <td>
                        {{ item.username }}
                    </td>
                </tr>

                </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        name: "table-type-1",
        props: ['contents', 'headers']
    }
</script>

如果我在 Prop 中传递以下数据集，这将起作用，如下所示:

data() {
    return {
        headers: ['#', 'First Name', 'Last Name', 'Username'],
        contents: [
            { first_name: 'Jhon', last_name: 'Stone', username: '@jhon' },
            { first_name: 'Lisa', last_name: 'Nilson', username: '@lisa' },
            { first_name: 'Larry', last_name: 'the Bird', username: '@twitter' }
        ]
    }
}

但由于我正在构建一个公用表，所以我的数据集可能会有所不同，因此有时可能是这样的:

data() {
    return {
        headers: ['#', 'Company Name', 'City', 'Turn Over (In Billions)'],
        contents: [
            { company_name: 'ABC Infotech', city: 'New Jersey', turn_over: 100 },
            { company_name: 'Amazon Web Services', city: 'New York', turn_over: 400 },
            { company_name: 'Digital Ocean', city: 'Washington', turn_over: 200 }
        ]
    }
}

或者可能是不同的结构。为此，我正在考虑在我的标题数据中传递一个键值集，它可以确定哪些键代表哪一列，如下所示:

data() {
    return {
        headers: [
            { title: '#', key: index, },
            { title: 'Company Name', key: 'company_name'},
            { title: 'City', key: 'city'},
            { title: 'Turn Over (In Billions)', key: 'turn_over' }
        ],
        contents: [
            { company_name: 'ABC Infotech', city: 'New Jersey', turn_over: 100 },
            { company_name: 'Amazon Web Services', city: 'New York', turn_over: 400 },
            { company_name: 'Digital Ocean', city: 'Washington', turn_over: 200 }
        ]
    }
}

或者简单地传递关键变量:

data() {
    return {
        headers: ['#', 'Company Name', 'City', 'Turn Over (In Billions)'],
        keys: ['index', 'company_name', 'city', 'turn_over'],
        contents: [
            { company_name: 'ABC Infotech', city: 'New Jersey', turn_over: 100 },
            { company_name: 'Amazon Web Services', city: 'New York', turn_over: 400 },
            { company_name: 'Digital Ocean', city: 'Washington', turn_over: 200 }
        ]
    }
}

我怎样才能做到这一点？或者是否可以通过这种方法将这些键放在我的 v-for 元素中？欢迎提出任何建议。谢谢。

Answer 1

对于通过标题的每一行循环，提取键并通过键获取内容:

new Vue({
  el: '#app',
  data: {
    headers: [
        { title: '#', key: 'index' },
        { title: 'Company Name', key: 'company_name'},
        { title: 'City', key: 'city'},
        { title: 'Turn Over (In Billions)', key: 'turn_over' }
    ],
    contents: [
        { company_name: 'ABC Infotech', city: 'New Jersey', turn_over: 100 },
        { company_name: 'Amazon Web Services', city: 'New York', turn_over: 400 },
        { company_name: 'Digital Ocean', city: 'Washington', turn_over: 200 }
    ]
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js"></script>

<div id='app'>
  <table class="table">
    <thead>
      <tr>
        <th v-for="item in headers">
          {{ item.title }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in contents">
        <th scope="row">
          {{ index+1 }}
        </th>
        <td v-for="{ key } in headers.slice(1)">
          {{ item[key] }}
        </td>
      </tr>
    </tbody>
  </table>
</div>