<template>
<el-form :model="tableData" ref="formRef">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="product_name" label="产品名称" width="400"></el-table-column>
<el-table-column prop="sku" label="SKU" min-width="120"></el-table-column>
<el-table-column prop="price" label="价格" width=""></el-table-column>
<el-table-column prop="quantity" label="数量" width=""></el-table-column>
<el-table-column label="确认数量">
<template #default="{ row, $index }">
<el-form-item :prop="'[' + $index + '].accepted_quantity'" :rules="rules.acceptNumber">
<el-input v-model="row.accepted_quantity"></el-input>
</el-form-item>
</template>
</el-table-column>
</el-table>
<el-button type="primary" @click="submitConfirm">确认订单</el-button>
</el-form>
</template>
<script setup>
import { reactive, ref, unref, toRefs } from 'vue';
import { ElMessage } from 'element-plus';
export default defineComponent({
name: 'componentName',
setup(prop, {emit}) {
const formRef = ref<HTMLElement | null>(null);
const state = reactive({
tableData: [
{
"accepted_quantity": 0,
"event": "",
"id": 39,
"order_id": 40,
"price": 200,
"product_id": 5,
"product_name": "product name of 3005BK",
"quantity": 1,
"ship_time": null,
"sku": "3005BK",
"tracking_number": ""
}
],
rules: {
acceptNumber: [
{required: true, message: "确认数量不能为空", trigger: "blur"}
],
}
});
const submitConfirm = () => {
const formWrap = unref(formRef) as any;
if (!formWrap) return;
formWrap.validate((valid: boolean) => {
if (valid) {
ElMessage.error('验证成功');
} else {
ElMessage.error('确认数量不能为空');
return false;
}
});
};
return {
formRef,
submitConfirm,
...toRefs(state),
};
},
});
</script>
