vue2 + element-ui中的el-form和el-table嵌套，实现表格表单内容编辑 + 表格表单数据校验 + 动态增减表单项

vue2 + element-ui中的el-form和el-table嵌套，实现表格表单内容编辑 + 表格表单数据校验 + 动态增减表单项

结合element-ui框架，Form表单示例动态增减表单项，又结合网上资料查询，实现。

效果图：

实现

1.el-form封装的表单校验功能
2.el-form动态增减表单项时，除了增加删除 form 的字段，校验规则 rules 也需要一起增加删除
3.el-table-column prop属性，render-header 方法，slot插槽

代码：

<el-form
          ref="dataForm"
          :model="form"
          :rules="rulesForm"
          label-position="right"
          label-width="110px"
          class="chargeRulesForm"
      >
	<el-form-item label="规则配置">
       <el-table :data="form.pilePriceRuleItemVOS">
         <!--    时段类型            -->
         <el-table-column prop="name" label="时段类型" :render-header="addRedStar">
           <template v-slot:default="scope">
             <el-form-item :prop="'pilePriceRuleItemVOS.' + scope.$index + '.name'">
               <el-input
                   v-model="scope.row.name"
                   clearable
                   placeholder="请输入"
                   :rules="rulesForm.pilePriceRuleItemVOS.name"
               />
             </el-form-item>
           </template>
         </el-table-column>
         <!--      开始时间          -->
         <el-table-column prop="startTime" label="开始时间" :render-header="addRedStar">
           <template v-slot:default="scope">
             <el-form-item :prop="'pilePriceRuleItemVOS.' + scope.$index + '.startTime'">
               <el-time-picker
                   v-model="scope.row.startTime"
                   placeholder="开始时间"
                   :rules="rulesForm.pilePriceRuleItemVOS.startTime"
               >
               </el-time-picker>
             </el-form-item>
           </template>
         </el-table-column>
         <!--      截止时间          -->
         <el-table-column prop="endTime" label="截止时间" :render-header="addRedStar">
           <template v-slot:default="scope">
             <el-form-item :prop="'pilePriceRuleItemVOS.' + scope.$index + '.endTime'">
               <el-time-picker
                   v-model="scope.row.endTime"
                   placeholder="截止时间"
                   :rules="rulesForm.pilePriceRuleItemVOS.endTime"
               >
               </el-time-picker>
             </el-form-item>
           </template>
         </el-table-column>
         <!--      电费（元/度）          -->
         <el-table-column prop="price" label="电费（元/度）" :render-header="addRedStar">
           <template v-slot:default="scope">
             <el-form-item :prop="'pilePriceRuleItemVOS.' + scope.$index + '.price'">
               <el-input
                   v-model="scope.row.price"
                   clearable
                   placeholder="请输入"
                   :rules="rulesForm.pilePriceRuleItemVOS.price"
               />
             </el-form-item>
           </template>
         </el-table-column>
         <!--      操作： 删除          -->
         <el-table-column label="操作" align="right">
           <template v-slot:default="scope">
             <el-button v-if="scope.$index > 0" type="danger" @click="deleteTableRowHandle(scope.row)">删除
             </el-button>
           </template>
         </el-table-column>
       </el-table>
       <br/>
       <div class="flex-end">
         <el-button
             type="primary"
             icon="el-icon-plus"
             @click="addTableRowHandle()"
         >添加新时段
         </el-button>
       </div>
     </el-form-item>
     <el-form-item>
       <el-button @click="returnpage">
         取消
       </el-button>
       <el-button
           type="primary"
           @click="onSubmitData"
       >
         确定
       </el-button>
     </el-form-item>
</el-form>

export default {
  data() {
    return {
      form: {
        pilePriceRuleItemVOS: [{
          name: "",
          startTime: "",
          endTime: "",
          price: ""
        }]
      }, //表单
      rulesForm: {
        ruleName: [{required: true, message: "请输入规则名称", trigger: "blur"}],
        serviceFees: [{required: true, message: "请输入服务费", trigger: "blur"}],
        pilePriceRuleItemVOS: [{
          name: [{required: true, message: "请输入时段类型", trigger: "blur"}],
          startTime: [{required: true, message: "请输入开始时间", trigger: "blur"}],
          endTime: [{required: true, message: "请输入截止时间", trigger: "blur"}],
          price: [{required: true, message: "请输入电费", trigger: "blur"}]
        }]
      }, // 表单校验规则
    };
  },
  methods: {
    //添加
    addTableRowHandle() {
      this.form.pilePriceRuleItemVOS.push({
        name: "",
        startTime: "",
        endTime: "",
        price: ""
      });
      this.rulesForm.pilePriceRuleItemVOS.push({
        name: [{required: true, message: "请输入时段类型", trigger: "blur"}],
        startTime: [{required: true, message: "请输入开始时间", trigger: "blur"}],
        endTime: [{required: true, message: "请输入截止时间", trigger: "blur"}],
        price: [{required: true, message: "请输入电费", trigger: "blur"}]
      });
	    },
	    //删除
	    deleteTableRowHandle(item) {
	      this.form.pilePriceRuleItemVOS.splice(this.form.pilePriceRuleItemVOS.indexOf(item), 1);
	      this.rulesForm.pilePriceRuleItemVOS.splice(this.rulesForm.pilePriceRuleItemVOS.indexOf(item), 1);
	    },
	    //取消
	    returnpage() {
	      //
	    },
	    // 表头生成必填校验红星样式
	    addRedStar(h, {column}) {
	      return [
	        h('span', {style: 'color: red'}, '*'),
	        h('span', ' ' + column.label)
	      ]
	    },
	    //提交
	    onSubmitData() {
	      this.$refs.dataForm.validate(valid => {
	        if (valid) {
	          console.log(1111, this.form)
	        } else {
	          return false;
	        }
	      });
	    },
	},
	
};

参考文档

1.element-ui组件库
2.https://blog.csdn.net/weixin_48612307/article/details/132445304 点击跳转