如何使用在elementplus表格中嵌套表单（CDN引入VUE3）

一、场景

例如目前需要在系统中输入一堆建筑物的信息，首先需要新建1个表单，假设1个建筑物的信息有7个字段。现实中可能要输入不止1个建筑物的信息，所以需要有增加和删除建筑物的功能，假如目前有2个建筑物，那就需要2行*7列的表格。

二、逻辑

（一）第1步：定义1个对象

1、定义1个对象的作用：定义1个对象用于储存表单的数据，表单的数据里面有初始定义的N个对象，然后通过点击删除可以删除特定的建筑物，通过增加可以新增1个建筑物表单。

2、定义的格式：是1个对象例如tableData，里面包含1个数组tableList，数组tableList内包含建筑物的对象，通过删除和增加改变数组中对象的数量。

3、实现代码：

 setup(){
        // 用于存放建筑物信息
        // tableData是一个对象，里面包含一个数组
    const tableData = Vue.ref({
      tableList : [
        {
          name: '建筑物1',
          structure: '钢结构',
          floor: '1',
          year: '',
          area: '',
          decoration: '简单装修',
          lift: '否',
        },
        {
          name: '建筑物2',
          structure: '钢混结构',
          floor: '1',
          year: '',
          area: '',
          decoration: '简单装修',
          lift: '否',
        },
      ]
    })

（二）第2步：定义删除方法和增加方法

1、关于删除方法deleteRow：需要告知待删除建筑物的具体行数，参数index，然后运用splice方法删除数组tableList中的对象。

2、关于增加方法onAddItem：无须告知方法特定参数，但需要预先定义1个建筑物，然后往数组tableList中使用push方法追加对象。

3、实现代码：

methods: {

    // 删除建筑物
    deleteRow(index){
      this.tableData.tableList.splice(index, 1)
      console.log("删除后:"+this.tableData.tableList[0].name)
    },

    // 增加建筑物
    onAddItem(){
      this.tableData.tableList.push({
        name: '',
        structure: '钢结构',
        floor: '1',
        year: '',
        area: '',
        decoration: '简单装修',
        lift: '',
      })
      console.log("增加后:"+this.tableData.tableList[0].name)
    }
  },

二、涉及到的元素以及顺序

（一）涉及到的elementPlus元素

1、el-form 表单
2、el-table 表格，需要包含在表单内
3、el-table-column 表格中的列，需要包含在表格内
4、el-form-item 子表单，需要包含在el-table-column内
5、template #default=“scope” 插槽，用于获取是第几行数据
6、el-input、el-select及el-option、子表单中的元素。

（二）涉及到的Vue3元素

1、:model、:prop、:data等带:的 数据绑定
2、$index 用于获取当前行号

3、"‘tableList.’ + scope.$index + ‘.name’"注意下方代码这样写亲测有效。

（二）实现代码

<el-form :model="tableData">
    <el-table :data="tableData.tableList" style="width: 100%" max-height="250">

      <!-- 第1列 -->
      <el-table-column fixed prop="name" label="建筑物名称" width="150">
        <template #default="scope">
          <el-form-item :prop="'tableList.' + scope.$index + '.name'">
            <el-input v-model="scope.row.name" clearable placeholder="请输入名称"></el-input>
          </el-form-item>
        </template>
      </el-table-column>

      <!-- 第2列 -->
      <el-table-column fixed prop="structure" label="建筑结构" width="130">
        <template #default="scope">
          <el-form-item :prop="'tableList.' + scope.$index + '.structure'">
              <el-select v-model="scope.row.structure" clearable placeholder="选择建筑结构">
                <el-option v-for="item in options_structure" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      
      <!-- 第3列 -->
      <el-table-column prop="floor" label="总层数" width="120" >
        <template #default="scope">
          <el-form-item :prop="'tableList.' + scope.$index + '.floor'">
              <el-select v-model="scope.row.floor" clearable placeholder="选择总层数">
                <el-option v-for="item in options_floor" :key="item.value" :label="item.label" :value="item.value"/>
              </el-select>
          </el-form-item>
        </template>
      </el-table-column>

      <!-- 第4列 -->
      <el-table-column prop="year" label="竣工日期" width="120" >
        <template #default="scope">
          <el-form-item :prop="'tableList.' + scope.$index + '.year'">
            <el-input v-model="scope.row.year" clearable placeholder="请输入竣工日期"></el-input>
          </el-form-item>
        </template>
      </el-table-column>

      <!-- 第5列 -->
      <el-table-column prop="area" label="建筑面积" width="120" >
        <template #default="scope">
          <el-form-item :prop="'tableList.' + scope.$index + '.area'">
            <el-input v-model="scope.row.area" clearable placeholder="请输入建筑面积"></el-input>
          </el-form-item>
        </template>
      </el-table-column>

      <!-- 第6列 -->
      <el-table-column prop="decoration" label="装修情况" width="120" >
        <template #default="scope">
          <el-form-item :prop="'tableList.' + scope.$index + '.decoration'">
            <el-select v-model="scope.row.decoration" clearable placeholder="选择装修情况">
              <el-option v-for="item in options_decoration" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>

      <!-- 第7列 -->
      <el-table-column prop="lift" label="电梯情况" width="120" >
        <template #default="scope">
          <el-form-item :prop="'tableList.' + scope.$index + '.lift'">
            <el-select v-model="scope.row.lift" clearable placeholder="选择电梯情况">
              <el-option v-for="item in options_lift" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      
      <!-- 第8列 -->
      <el-table-column fixed="right" label="删除建筑物" min-width="120">
          <template #default="scope">
              <el-button
              link
              type="primary"
              size="small"
              @click="deleteRow(scope.$index)"
              >
              删除
              </el-button>
          </template>
      </el-table-column>
    </el-table>

    <!-- 增加建筑物 -->
    <el-button class="mt-4" style="width: 100%" @click="onAddItem">
      增加建筑物
    </el-button>
  </el-form>

三、效果展示

初始效果:
点击新增：

四、进阶（新增校验规则）

可以新增校验规则，利用el-form中的:rules，有空分享。