Question

我正在学习Vue JS。我想创建一个组件来显示带有可以在其他组件中重用的表的数据。我有2个道具项（数据）和列（列名称）

items: [
        {
            'id':'1',
            'title': 'hello',
            'description': 'ok ok',
            'created_date': '2018-09-09'
        },
        {
            'id':'2',
            'title': 'hello 2',
            'description': 'ok ok 2',
            'created_date': '2018-10-09'
        }
    ],
    columns: [ 'id', 'title', 'description', 'created_date']

我想创建一个如下表

<table class="table">
<thead>
    <tr>
        <th v-for="(column, index) in columns" :key="index"> {{column}}</th>
    </tr>
</thead>
<tbody>
    <tr v-for="(item, index) in items" :key="index">
        <td v-for="(column, indexColumn) in columns" :key="indexColumn">{{item.$column}}</td>
    </tr>
</tbody>

我不知道如何通过列名从项目中获取价值。是否可以创建这样的表？

Answer 1

一切都很好，只需将模板item。$ column中的值更改为item [column]

   <table class="table">
      <thead>
          <tr>
              <th v-for="(column, index) in columns" :key="index"> {{column}}</th>
          </tr>
      </thead>
      <tbody>
          <tr v-for="(item, index) in items" :key="index">
              <td v-for="(column, indexColumn) in columns" :key="indexColumn">{{item[column]}}</td>
          </tr>
      </tbody>
    </table>

创建动态表组件Vue JS

1 个答案: