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'
			})
		}