vue创建动态行新增数据

1.html代码

<template slot="top-left" slot-scope="props">
		<q-btn
		color="primary"
		outline
		size="sm"
		@click="addBom"
		:label="$t('添加')"
		class="q-mr-sm" ></q-btn>
		<q-btn
		color="primary"
		outline
		size="sm"
		@click="delectItem"
		:label="$t('删除')"
		class="q-mr-sm" ></q-btn>
</template>

<template  slot="body" slot-scope="propsItem">
	<q-tr  :props='propsItem'>
		<q-td>
			<q-checkbox color="primary" v-model="propsItem.selected"></q-checkbox>
		</q-td>

		<q-td key="name" :props="propsItem" >
			<q-input v-model='propsItem.row.name'></q-input>
		</q-td>
		<q-td key="spec" :props="propsItem" >
			<q-input v-model='propsItem.row.spec'></q-input>
		</q-td>
		<q-td key="qty" :props="propsItem" >
			<q-input v-model='propsItem.row.qty' type='number'></q-input>
		</q-td>
	</q-tr>
</template>


2.js代码
 2.1.1定义动态表头
 columnsItem:function(){
				return[
					{
						name:'name',
						label:'名称',
						align:'left'
					},
					{
						name:'spec',
						label:'规格',
						align:'left'
					},
					{
						name:'qty',
						label:'用量',
						align:'left'
					},
					
				]
			}
	2.1.2定义变量
			skuBoms:[],
	2.1.3每次点击新增按钮让其新增一行
	addBom:function(){
      this.skuBoms.push({})			
	},