기술나눔

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

이 문서에서는 추가, 삭제, 수정을 위해 편집 가능한 데이터 열을 el-table에 추가하는 방법을 기록합니다.

1. 빈 줄 추가

페이지가 마운트될 때 테이블 목록에 데이터 행을 직접 추가하고, push() 메소드를 사용하여 데이터 열을 직접 추가할 수도 있으며 이때 일부 기본값을 설정할 수도 있습니다.예를 들어, 다음과 같은 경우제품 개수.

	mounted() {
		this.$nextTick(() => {
			this.addFormData.productList.push({
				productName: '',//产品名称
				price: '',//单价(元/㎡)
				productCount: '1', //产品件数
				totalAmount: '', //小计￥元
			})
		})
	},

2. 데이터를 가져올 제품명을 선택하고 목록 행에 표시합니다.

현재 사례의 제품 이름은 드롭다운 목록에서 선택되므로 데이터를 가져오고 이를 드롭다운 목록으로 렌더링하기 위해 인터페이스를 요청해야 합니다. 여기서는 가짜 데이터가 직접 사용됩니다.

	data() {
		return {
			addFormData: {
				// 产品列表
				productList: [],
			},
			addFormRules: {
				productName: [{
					required: true,
					message: '请选择产品',
					trigger: 'blur'
				}],
				price: [{
					required: true,
					message: '请输入单价',
					trigger: 'blur'
				}
				],
				productCount: [{
					required: true,
					message: '请输入产品件数',
					trigger: 'blur'
				}]
			},
			optionsList: [
				{
					id:1,
					productName:'橘子',
					price:'10',
				},
				{
					id:2,
					productName:'苹果',
					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="产品名称" 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="请选择"
								@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) {
            //此时的e 就是optionsList中的某一项
            //让后解构赋值给我们这一行对应的值 
			let data = this.addFormData.productList[index]
			Object.keys(data).forEach(key => {
				data[key] = e[key]
			})
			this.addFormData.productList[index].productCount = 1
		},

3. 소계 통과(계산된 속성 계산값)

		<el-form ref="addFormRef" :model="addFormData" :rules="addFormRules" size="mini" :inline="true">
			<el-table tooltip-effect="light" :data="addFormData.productList" >
				<el-table-column label="小计￥元" 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) => {
				//先判断单价和数量必须存在
				if (data.productCount && data.price) {
					data.totalAmount = parseInt(data.productCount) * parseInt(parseFloat(data.price))
					return data.totalAmount
				} else {
					return 0.00
				}
			}
		}
	},

4. 이전 행의 데이터를 재사용하려면 다른 행을 추가하세요.

		handleUpdateYes(row) {
            //拿到上一行数据再往数组中push（）新的数据
			this.addFormData.productList.push({
				productName: row.productName,//产品名称
				price: row.price,//单价(元/㎡)
				productCount: row.productCount, //产品件数
				totalAmount: '', //小计￥元
			})
		},

5. 특정 라인 삭제

		// 删除产品
		handleDeleteProduct(row) {
			this.$confirm('此操作将永久删除该产品信息, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$message({
					type: 'success',
					message: '删除成功!'
				});
				this.addFormData.productList.splice(row.index, 1)
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},

6. 제출을 클릭하여 양식을 확인합니다.

		// 添加订单表单提交
		handleSubmitAdd() {
			this.$refs.addFormRef.validate(async (valid) => {
				if (!valid) return
				//校验通过 往下执行
			})
		},