vue创建表格增删功能

将创建的数据追加到列表中

//html
<input v-model="orderText" :placeholder="$t('languageInstructions.inputText')" />
<input v-model="urlText" />
//js
data() {
	return {
			orderText: "",
			urlText: "",
			tableData: localStorage.getItem("orderDatass") ? JSON.parse((localStorage.getItem("orderDatass"))) : []
		}
	},
methods: {
let addData = {
			name: this.orderText,
			func: 'website',
			url: this.urlText
	      }
	      this.tableData.push(addData);
}

完整代码：

<template>
	<div>
		<RenderHeader />
		<div class="mouseBackBox">
			<Header />
			<div class="setBackBox">
				<div class="createBox">
					<div class="inputBox">
						<span class="title">{{$t('languageInstructions.text')}}</span>
						<input v-model="orderText" :placeholder="$t('languageInstructions.inputText')" />
					</div>
					<div class="inputBox">
						<span class="title">{{$t('languageInstructions.CommandFun')}}</span>
						<span class="wangye">{{$t('languageInstructions.website')}}</span>
					</div>

					<div class="inputBox">
						<span class="title">{{$t('languageInstructions.url')}}</span>
						<input v-model="urlText" />
					</div>

					<div class="inputBox" style="text-align: center;">
						<button @click="cancle">{{$t('languageInstructions.cancle')}}</button>
						<button @click="creat" style="background-color: #3b8fe9;color: white;">{{$t('languageInstructions.create')}}</button>
					</div>
				</div>

				<div class="tabListBox">
					<el-table max-height="270" :data="tableData" style="width: 100%;" border :header-cell-style="{'text-align':'center',background:'#fafafa'}">
						<el-table-column fixed prop="name" label="指令" width="100" align="center">
						</el-table-column>
						<el-table-column prop="func" label="功能" width="100" align="center">
						</el-table-column>
						<el-table-column prop="url" label="执行路径" width="349">
						</el-table-column>
						<el-table-column label="操作" width="100" align="center">
							<template slot-scope="scope">

								<el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
									<img src="../../assets/img/ic_delete16.png" />
								</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>

			</div>
		</div>
	</div>


</template>

<script>
	import Header from "../Header/Header.vue"
	import RenderHeader from "../Header/RenderHeader.vue"
	export default {
		components: {
			Header,
			RenderHeader
		},
		data() {
			return {
				orderText: "",
				urlText: "",
				tableData: localStorage.getItem("orderDatass") ? JSON.parse((localStorage.getItem("orderDatass"))) : []
			}
		},
		methods: {
			cancle() {
				this.orderText = "";
				this.urlText = "";
			},
			creat() {
				if (this.orderText == "" || this.urlText == "") {
					alert("指令文本或指令路径不能为空")
					return;
				}
				let addData = {
					name: this.orderText,
					func: 'website',
					url: this.urlText
				}
				this.tableData.push(addData);
				localStorage.setItem("orderDatass", JSON.stringify(this.tableData));
				this.orderText = "";
				this.urlText = "";
			},
			deleteRow(index, rows) {
				rows.splice(index, 1);
				localStorage.setItem("orderDatass", JSON.stringify(rows))
			}
		}
	}
</script>

<style lang="css" scoped>
	.createBox {
		height: 200px;
		width: 650px;
		margin: 20px 20px 0px 20px;
	}

	.inputBox {
		margin-bottom: 10px;
	}

	.inputBox input {
		width: 560px;
		height: 36px;
		background-color: #ffffff;
		border-radius: 4px;
		border: solid 1px #d5d5d5;
		margin-left: 14px;
		padding-left: 10px;
	}

	.inputBox button {
		width: 100px;
		height: 36px;
		background-color: #ffffff;
		border-radius: 4px;
		border: solid 1px #dddddd;
		font-size: 14px;
		font-family: SourceHanSansCN-Regular;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0px;
		color: #666666;
	}

	.title {
		display: inline-block;
		font-family: SourceHanSansCN-Regular;
		font-size: 14px;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0px;
		color: #666666;
		width: 56px;
		height: 14px;
	}

	.wangye {
		width: 80px;
		height: 36px;
		background-color: #ebf3fc;
		border-radius: 18px;
		border: solid 1px #3b8fe9;
		font-family: SourceHanSansCN-Regular;
		font-size: 14px;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0px;
		color: #3b8fe9;
		display: inline-block;
		line-height: 36px;
		text-align: center;
		margin-left: 14px;
	}

	.tabListBox {
		height: 270px;
		width: 650px;
		margin: 0px 20px;
	}

	.tabListBox>>>.el-table__header tr,
	.tabListBox>>>.el-table__header th {
		padding: 0;
		height: 40px;
	}

	.tabListBox>>>.el-table__body tr,
	.tabListBox>>>.el-table__body td {
		padding: 2px;
		height: 40px;
	}
</style>