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

在Vue2和Element UI中，可以通过使用el-form组件来实现表单编辑，并使用el-table组件来展示和编辑表格内的数据。以下是一个简单的例子，展示了如何嵌套这两个组件，并实现行内编辑及表单项计数。

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="姓名">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="商品列表">
      <el-button type="text" @click="addRow">添加商品</el-button>
      <el-table :data="form.items" style="width: 100%;">
        <el-table-column prop="name" label="商品名称">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="商品价格">
          <template slot-scope="scope">
            <el-input v-model="scope.row.price"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="removeRow(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        name: '',
        items: [
          { name: '', price: '' }
        ]
      }
    };
  },
  methods: {
    addRow() {
      this.form.items.push({ name: '', price: '' });
    },
    removeRow(index) {
      this.form.items.splice(index, 1);
    },
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('提交成功!');
        } else {
          alert('表单验证失败!');
          return false;
        }
      });
    }
  }
};
</script>

在这个例子中，我们有一个包含姓名和商品列表的表单。商品列表可以通过点击添加商品按钮来增加行，每行都可以编辑商品名称和价格。提交表单时，会触发表单验证。如果验证通过，会弹出一个提示框表示提交成功，如果失败则会显示失败信息。这个例子展示了如何在Vue2和Element UI中处理嵌套表单和表格编辑的基本方法。