我正在尝试使用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>
答案 0 :(得分:0)
您不需要迭代自己。来自Element-Ui的el-table组件采用数组作为数据道具。参见Table Props for el-table component in ElementUI
这应该有效:
<el-table :data="items">
...
</el-table>
每个el-table-column
必须是项目列表中项目的键,方法是将prop='myKey'
添加到每个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属性将对更改起反应。
答案 1 :(得分:0)
多看看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>