Vue3 el-table里input设置为必填

Vue3 el-table里input设置为必填

页面效果

实现代码

<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>