快捷導(dǎo)航

element el-table如何實(shí)現(xiàn)表格動(dòng)態(tài)增加/刪除/編輯表格行(帶校驗(yàn)規(guī)則)

更新時(shí)間：2024年07月15日 11:57:02 作者：優(yōu)雅格子衫

這篇文章主要介紹了element el-table如何實(shí)現(xiàn)表格動(dòng)態(tài)增加/刪除/編輯表格行(帶校驗(yàn)規(guī)則),本篇文章記錄el-table增加一行可編輯的數(shù)據(jù)列,進(jìn)行增刪改,感興趣的朋友跟隨小編一起看看吧

1.增加空白行

直接在頁(yè)面mounted時(shí)對(duì)form里面的table列表增加一行數(shù)據(jù)，直接使用push() 方法增加一列數(shù)據(jù)這個(gè)時(shí)候也可以設(shè)置一些默認(rèn)值。比如案例里面的 產(chǎn)品件數(shù) 。

mounted() {
		this.$nextTick(() => {
			this.addFormData.productList.push({
				productName: '',//產(chǎn)品名稱(chēng)
				price: '',//單價(jià)(元/㎡)
				productCount: '1', //產(chǎn)品件數(shù)
				totalAmount: '', //小計(jì)￥元
			})
		})
	},

2.產(chǎn)品名稱(chēng)選中拿到數(shù)據(jù)展示到列表行

因?yàn)楫?dāng)前案例的產(chǎn)品名是下拉選擇的，所以我們要請(qǐng)求接口拿到數(shù)據(jù)渲染到下拉列表，這里直接使用了假數(shù)據(jù)。

data() {
		return {
			addFormData: {
				// 產(chǎn)品列表
				productList: [],
			},
			addFormRules: {
				productName: [{
					required: true,
					message: '請(qǐng)選擇產(chǎn)品',
					trigger: 'blur'
				}],
				price: [{
					required: true,
					message: '請(qǐng)輸入單價(jià)',
					trigger: 'blur'
				}
				],
				productCount: [{
					required: true,
					message: '請(qǐng)輸入產(chǎn)品件數(shù)',
					trigger: 'blur'
				}]
			},
			optionsList: [
				{
					id:1,
					productName:'橘子',
					price:'10',
				},
				{
					id:2,
					productName:'蘋(píng)果',
					price:'8',
				}
			]
		}
	},
		<el-form ref="addFormRef" :model="addFormData" :rules="addFormRules" size="mini" :inline="true">
			<el-table tooltip-effect="light" :data="addFormData.productList" >
				<el-table-column label="產(chǎn)品名稱(chēng)" prop="productName" min-width="150">
					<template slot-scope="scope">
						<el-form-item size="mini" :prop="'productList.' + scope.$index + '.productName'"
							:rules="addFormRules.productName" class="all">
							<el-select v-model="scope.row.productName" filterable value-key="id" placeholder="請(qǐng)選擇"
								@change="pestChange($event, scope.$index)">
								<el-option v-for="item in optionsList" :key="item.id" :label="item.productName"
									:value="item">
								</el-option>
							</el-select>
						</el-form-item>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
					width="150">
					<template slot-scope="scope">
						<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateYes(scope.row)"
							v-hasPermi="['system:order:edit']">增加</el-button>
						<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteProduct(scope.row)"
							v-hasPermi="['system:order:remove']">刪除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-form-item size="large">
				<el-button type="primary" @click="handleSubmitAdd">提交</el-button>
				<el-button @click="handleCancelAdd">取消</el-button>
			</el-form-item>
		</el-form>
		pestChange(e, index) {
            //此時(shí)的e 就是optionsList中的某一項(xiàng)
            //讓后解構(gòu)賦值給我們這一行對(duì)應(yīng)的值 
			let data = this.addFormData.productList[index]
			Object.keys(data).forEach(key => {
				data[key] = e[key]
			})
			this.addFormData.productList[index].productCount = 1
		},

3.小計(jì)通過(guò)(計(jì)算屬性計(jì)算值)

<el-form ref="addFormRef" :model="addFormData" :rules="addFormRules" size="mini" :inline="true">
			<el-table tooltip-effect="light" :data="addFormData.productList" >
				<el-table-column label="小計(jì)￥元" prop="totalAmount" width="100">
					<template slot-scope="scope">
						<div class="notext">
							{{ getTotalAmount(scope.row) }}
						</div>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
					width="150">
					<template slot-scope="scope">
						<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdateYes(scope.row)"
							v-hasPermi="['system:order:edit']">增加</el-button>
						<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDeleteProduct(scope.row)"
							v-hasPermi="['system:order:remove']">刪除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-form-item size="large">
				<el-button type="primary" @click="handleSubmitAdd">提交</el-button>
				<el-button @click="handleCancelAdd">取消</el-button>
			</el-form-item>
		</el-form>

computed: {
		getTotalAmount(){
			return (data) => {
				//先判斷單價(jià)和數(shù)量必須存在
				if (data.productCount && data.price) {
					data.totalAmount = parseInt(data.productCount) * parseInt(parseFloat(data.price))
					return data.totalAmount
				} else {
					return 0.00
				}
			}
		}
	},

4.再增加一行復(fù)用上一行的數(shù)據(jù)

handleUpdateYes(row) {
            //拿到上一行數(shù)據(jù)再往數(shù)組中push（）新的數(shù)據(jù)
			this.addFormData.productList.push({
				productName: row.productName,//產(chǎn)品名稱(chēng)
				price: row.price,//單價(jià)(元/㎡)
				productCount: row.productCount, //產(chǎn)品件數(shù)
				totalAmount: '', //小計(jì)￥元
			})
		},

5.刪除某一行

// 刪除產(chǎn)品
		handleDeleteProduct(row) {
			this.$confirm('此操作將永久刪除該產(chǎn)品信息, 是否繼續(xù)?', '提示', {
				confirmButtonText: '確定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$message({
					type: 'success',
					message: '刪除成功!'
				});
				this.addFormData.productList.splice(row.index, 1)
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消刪除'
				});
			});
		},

6.點(diǎn)擊提交對(duì)表單校驗(yàn)

// 添加訂單表單提交
		handleSubmitAdd() {
			this.$refs.addFormRef.validate(async (valid) => {
				if (!valid) return
				//校驗(yàn)通過(guò) 往下執(zhí)行
			})
		},

到此這篇關(guān)于element el-table實(shí)現(xiàn)表格動(dòng)態(tài)增加/刪除/編輯表格行，帶校驗(yàn)規(guī)則的文章就介紹到這了,更多相關(guān)element el-table表格動(dòng)態(tài)增加內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: