vue + ElementUI实现表格的添加行、删除行

添加行

<el-table
								:data="formData.dataList"
								class="tb"
								border
								height="250"
								:row-class-name="tableRowClassName"
								@row-click="onRowClick"
								highlight-current-row
								@selection-change="handleSelectionChange"
							>
								<el-table-column
									type="selection"
									align="center"
									fixed="left"
									width="55"
								></el-table-column>
								<el-table-column
									type="index"
									label="序号"
									align="center"
									width="90">
									<template slot-scope="scope">
										<span>{{scope.$index + 1}}</span>
									</template>
								</el-table-column>
								<el-table-column
									v-if="show"
									prop="guid"
									label="主键"
									align="center"
									width="80">
									<template slot-scope="scope">
										<el-input
											v-model="scope.row.guid"
											placeholder="主键"
											readonly
										>
										</el-input>
									</template>
								</el-table-column>
								<el-table-column
									v-if="show"
									prop="userName"
									label="用户名称"
									align="center"
									min-width="120">
									<template slot-scope="scope">
										<el-input
											v-model.trim="scope.row.userName"
											placeholder="请输入用户名称"
											@change="handleChange"
										>
										</el-input>
									</template>
								</el-table-column>
								<el-table-column
									prop="account"
									label="账号"
									align="center"
									min-width="120">
									<template slot-scope="scope">
										<el-input
											v-model.trim="scope.row.account"
											placeholder="请输入绑定账号"
											@change="handleChange"
										>
										</el-input>
									</template>
								</el-table-column>
							</el-table>

添加行方法

	// 添加行的索引
	tableRowClassName ({row, rowIndex}) {
		row.index = rowIndex
		console.log('row.index: ' + row.index)
	}

删除行方法

	// 行点击消除new标记
	onRowClick (row, event, column) {
		this.currentRow = row.index
		console.log('row.index----' + this.currentRow)
	},
	// 删除单行表格数据
	delGrid () {
		let index = this.currentRow
		console.log('index: ------------' + index)
		if (index === null) {
			this.$alert('<span style="font-size: 20px;font-family: \'宋体\';font-weight: 700;">请选中要删除的记录！</span>', '消息', {
				dangerouslyUseHTMLString: true,
				type: 'warning'
   			 })
		} else {
			this.formData.dataList.splice(index, 1)
			this.$alert('<span style="font-size: 20px;font-family: \'宋体\';font-weight: 700;">删除成功！</span>', '消息', {
				dangerouslyUseHTMLString: true,
				type: 'success'
			})
		}