Berbagi teknologi

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

Artikel ini mencatat cara menambahkan kolom data yang dapat diedit ke el-tabel untuk penambahan, penghapusan, dan modifikasi.

1. Tambahkan baris kosong

Tambahkan langsung baris data ke daftar tabel dalam formulir saat halaman dipasang, dan langsung gunakan metode push() untuk menambahkan kolom data Anda juga dapat mengatur beberapa nilai default saat ini.Misalnya saja dalam kasus iniJumlah potongan produk.

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

2. Pilih nama produk untuk mendapatkan data dan menampilkannya di baris daftar

Karena nama produk dalam kasus saat ini dipilih dari daftar drop-down, kita perlu meminta antarmuka untuk mendapatkan data dan merendernya ke dalam daftar drop-down. Data palsu digunakan langsung di sini.

	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. Subtotal yang lolos (nilai kalkulasi atribut yang dihitung)

		<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. Tambahkan baris lain untuk menggunakan kembali data baris sebelumnya.

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

5. Hapus baris tertentu

		// 删除产品
		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. Klik Kirim untuk memverifikasi formulir.

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