欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-07 22:41:21
...

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