实现效果
html部分
<template>
<div class="table">
<el-form ref="tableFormRef" :model="form">
<el-table :data="form.detailList">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="物资编号" align="center" prop="materialNo" />
<el-table-column label="入库数量" align="center" prop="quantity" width="160">
<template #default="scope">
<el-form-item :prop="'detailList['+scope.$index+'].quantity'" :rules="tableFormRules.quantity">
<el-input-number v-model="scope.row.quantity" placeholder="入库数量" :min="1" size="small"
:max="2147483647"></el-input-number>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="所属仓库" align="center" width="180">
<template #default="scope">
<el-form-item :prop="'detailList['+scope.$index+'].warehouseType'"
:rules="tableFormRules.warehouseType">
<el-select v-model="scope.row.warehouseType" placeholder="请选择所属仓库">
<el-option
v-for="dict in la_work_area"
:key="dict.value"
:label="dict.label"
:value="dict.value"
></el-option>
</el-select>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="金额" align="center" width="160">
<template #default="scope">
<el-form-item :prop="'detailList['+scope.$index+'].money'" :rules="tableFormRules.money">
<el-input-number v-model="scope.row.money" :precision="2" @change="changeMoney" size="small"
:min="0" placeholder="请输入金额"></el-input-number>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button link type="danger" icon="Delete" @click="handleDelete(scope.$index)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
</div>
<div class="tc mt16">
<el-button @click="cancel">取消</el-button>
<el-button @click="submitForm" type="primary" color="#67C23A">提交</el-button>
</div>
</template>
数据部分
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const buttonLoading = ref(false);
const tableFormRef = ref<ElFormInstance>();
const tableFormRules = reactive({
quantity: [
{ required: true, message: "请输入数量", trigger: "change" }
],
warehouseType: [
{ required: true, message: "请选择所属仓库", trigger: "change" }
],
money: [
{ required: true, message: "请输入金额", trigger: "change" }
]
});
/** 提交按钮 */
const submitForm = () => {
tableFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
//处理自己的业务逻辑
proxy?.$modal.msgSuccess("操作成功");
cancel();
}
});
};