一個帶有多個form-item和table多表單

最外一層是form ,form包含了2個form-item 和2個table ,然後要將1個form-item 的數據自己填寫 一個form-item的數據從別的地方獲取和table數據從別的地方獲取然後一起 提交到下一步

 

1.form-item從子組件獲取數據回來,那麼先把子組件獲取回來到數據保存到form裡邊然後再展示到 form-item

<el-form-item prop="customerInquiryNo" :label="InquiryNo">
                <el-input v-model="formData.InquiryNo" :disabled="formData.InquiryID > 0">
                  <!--formData.InquiryNo-->
                </el-input>
        </el-form-item>



updateData(data) 
         this.customerData = data
         this.formData.englishName = this.customerData[0].englishName
         this.formData.customerNo = this.customerData[0].customerNo
         this.formData.contactWindow = this.customerData[0].contacts[0].contactWindow
         console.log('^^^^^', this.formData)
    },

2.table從子組件獲取回來數據可以是對象耶可以是數組

 updateSupplierData(data) {
      this.suppliersData = data
      this.formData.spRFQs = this.suppliersData
      console.log('&&&&', data)
    },

 3.進入到這個頁面就會生成一個id,用到鉤子函數

created:{
        this.getCustomerInquiry()
    }

 

<div> <!-- 条件查询 --> <div> <el-form> <!-- 第一行 --> <el-row> <el-col :span="8"> <div>查询条件:</div> </el-col> </el-row> <!-- 第二行 --> <el-row> <el-col :span="6"> <el-form-item label="卡号:"> <el-input style="width: 180px;"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="至"> <el-input style="width: 180px;"></el-input> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="卡状态"> <el-select value="1" style="width: 240px;"> <el-option label="状态一" value="keshiyi"></el-option> <el-option label="状态二" value="keshier"></el-option> </el-select> </el-form-item> </el-col> </el-row> <!-- 第三行 --> <el-row> <el-col :span="6"> <el-form-item label="导入日期:"> <el-input style="width: 180px;"></el-input> </el-form-item> </el-col> <el-col :span="6"> <el-form-item label="至"> <el-input style="width: 180px;"></el-input> </el-form-item> </el-col> <el-col :span="2"> <el-button type="primaty">查询</el-button> </el-col> <el-col :span="2"> <el-button type="primaty">卡入库</el-button> </el-col> </el-row> </el-form> </div> <!-- 表单 --> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="序号" width="50"></el-table-column> <el-table-column prop="name" label="卡号" width="100"></el-table-column> <el-table-column prop="address" label="导入日期"></el-table-column> <el-table-column prop="address" label="卡状态"></el-table-column> <el-table-column prop="address" label="操作"></el-table-column> </el-table> </div> <!-- 分页 --> <div> <el-pagination :current-page="1" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400"> </el-pagination> </div>放在一个表格区域中
最新发布
08-20
### Element UI `el-table` 中多个子表单的验证规则 为了在 `el-table` 组件内实现条记录的数据校验,可以采用将每一行视为独立的表单项的方式处理。通过定义统一的验证规则并将其应用于每一条记录,确保所有输入项都能按照设定的要求进行有效性检查。 对于表格内的每一个可编辑单元格,应当绑定对应的模型属性,并设置相应的验证条件。具体来说,在创建表单时需预先设计好数据结构,使得每一列对应字段能够被正确识别与关联[^1]。 当涉及到数值类型的输入框时,如金额、数量等,则可以在 `<el-input>` 上指定 `type="number"` 及 `v-model.number` 来限定其仅接受数字型输入,这有助于提高用户体验以及减少不必要的错误发生几率[^2]。 下面是一个简单的例子来展示如何在一个包含行记录的 `el-table` 中实施这样的功能: ```html <template> <div> <!-- 定义一个 el-form --> <el-form :model="tableData" ref="formRef"> <el-table :data="tableData.list" border style="width: 100%"> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="value" label="值"> <template slot-scope="scope"> <el-form-item :prop="'list.' + scope.$index + '.value'" :rules="rules.value" > <el-input v-model.number="scope.row.value" type="number"></el-input> </el-form-item> </template> </el-table-column> </el-table> <el-button @click="submitForm">提交</el-button> </el-form> </div> </template> <script> export default { data() { return { tableData: { list: [ { name: '项目A', value: '' }, { name: '项目B', value: '' } ] }, rules: { value: [{ required: true, message: '请输入有效数值', trigger: 'blur' }] } }; }, methods: { submitForm() { this.$refs.formRef.validate((valid) => { if (valid) alert('提交成功!'); else console.log('error submit!!'); }); } } }; </script> ``` 此代码片段展示了怎样利用 Vue.js Element UI 实现带有内置验证逻辑的动态表格编辑器。每当用户尝试提交整个表单之前,都会触发一次全局性的合法性检测过程;只有当所有的必填项都满足既定标准之后才会允许继续操作。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值