在Vue Js中的元素中添加行答案

【问题标题】：Addings Rows in Element In Vue Js在Vue Js中的元素中添加行
【发布时间】：2018-09-21 14:07:20
【问题描述】：

我正在尝试使用 VueJs 中的 Element IO 显示行。我的问题是为什么我的代码没有输出，如何添加一些行并删除一些行？我的代码有问题吗？我附上了一个 v-for 但它似乎无法工作。对不起，我是 element-ui 的新手。请在下面查看我的代码。谢谢。

<template>
    <div>

        <el-form>
            <el-table v-for='(item, index) in items' :key='index'>

                    <el-table-column
                            sortable="true"
                            label="Item">
              <template>
                 <el-input v-model="item.item_id"></el-input>
              </template>
                    </el-table-column>

                    <el-table-column
                            sortable="true"
                            label="Quantity">
                            <template>
                 <el-input v-model="item.quantity"></el-input>
              </template>
                    </el-table-column>

                    <el-table-column
                            sortable="true"
                            label="Unit">
                            <template>
                 <el-input v-model="item.quantity"></el-input>
              </template>
                    </el-table-column>

                    <el-table-column
                            sortable="true"
                            label="Unit Price">
                            <template>
                 <el-input v-model="item.unit_price"></el-input>
              </template>
                    </el-table-column>

                    <el-table-column
                            fixed="right"
                            property="action"
                            label="Action">
                            <template>
                                    <el-button type="danger" size="small">Remove</el-button>
                            </template>
                    </el-table-column>

            </el-table>
            <br>
            <el-form-item style="float:right;">
                <el-button type="submit" @click.prevent="createNewPurchaseOrder">Create</el-button>
                <el-button>Cancel</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
  data () {
    return {
      items: [
        {
          item_id: '1',
          quantity: '8',
          unit_id: 'Gram',
          unit_price: '100'
        }
      ]
    }
  },
  methods: {
    createNewPurchaseOrder () {
      console.log(this.$data)
    }
  }
}
</script>

【问题讨论】：

标签： vue.js vuejs2 element-ui

【解决方案1】：

您不需要迭代自己。 Element-Ui 的 el-table 组件将数组作为数据道具来工作。见Table Props for el-table component in ElementUI

这应该有效：

<el-table :data="items">
  ...
</el-table>

通过将prop='myKey' 添加到每个el-table-column 中，每个el-table-column 都必须是您项目列表中项目的键

例如，如果我有一个这样的项目数组：

[{
  id : 12,
  firstname : "John",
  lastname : "Doe"
}]

我会有一张这样的桌子

<el-table :data="items">
  <el-table-column prop="id" label="ID">...</el-table-column>
  <el-table-column prop="firstname" label="Firstname">...</el-table-column>
  <el-table-column prop="lastname " label="Lastname">...</el-table-column>
</el-table>

当您向数组中删除或添加项目时，el-table 的 :data 属性将对更改做出反应。

【讨论】：

【解决方案2】：

多看at element table documentation

您必须将data 属性传递给el-table，并将prop 属性传递给el-table-column

<template>
<div>

    <el-form>
        <el-table :data="items" :key='index'>

          [...]
        </el-table>
        <br>
        <el-form-item style="float:right;">
            <el-button type="submit" @click.prevent="createNewPurchaseOrder">Create</el-button>
            <el-button>Cancel</el-button>
        </el-form-item>
    </el-form>
</div>

【讨论】：