element的el-form和el-table嵌套使用

从样式来看是table，但是写法是table嵌在form里。

截取主体代码解析（vue3+element-plus）

el-form 中 :model="state.formObj" 绑定为数据最外层对象  Object

el-table 中 :data="state.formObj.configs" 绑定为渲染部分的数组  Array

一定要注意数据类型

:span-method="objectSpanMethod" 合并单元格

 #default="scope" 插槽方式进行数据遍历绑定

scope.$index 下标

:prop="'configs.' + scope.$index + '.dataSourceId'" 动态绑定

:rules="activityRules.dataSourceId" 绑定各自校验规则

<el-form      
  :model="state.formObj"      
  ref="originForm"     
  :rules="activityRules"       
  :inline="true"     
 >       
    <el-table  
        :data="state.formObj.configs"  
        style="width: 100%"  
        border 
        @selection-change="handleSelectionChange" 
        :span-method="objectSpanMethod"
     >  
        <el-table-column fixed align="center" label="标化规则名称" width="110"> 
           <template #default="scope">    
              <span>{{ scope.row.groupName }}</span> 
           </template>       
        </el-table-column>      
        <el-table-column type="selection" width="45" align="center" />   
        <el-table-column align="center" label="待标化列配置" width="505">  
            <template #default="scope">    
               <div class="flex">       
                  <el-form-item  
                     :prop="'configs.' + scope.$index + '.dataSourceId'"  
                     :rules="activityRules.dataSourceId"       
                     style="margin:0;padding:0;"          
                  >      
                     <el-select filterable clearable 
                       v-model="scope.row.dataSourceId"
                       @change="onDbChange($event,scope.row,1)"
                       placeholder="请选择数据源" style="width:147px;margin-left:10px;">         
                          <el-option v-for="item in state.dbOptions" :key="item.id" :label="item.name" :value="item.id" />     
                     </el-select>  
                 </el-form-item>          
                   <!-- 省略部分代码 -->            
               </div> 
           </template>          
       </el-table-column> 
         <!-- 省略部分代码 -->     
    </el-table> </el-form>

合并单元格（第一列根据数据长度整体合并）

//当前行 row、当前列 column、当前行号 rowIndex、当前列号 columnIndex 四个属性
const objectSpanMethod =({ row, column, rowIndex, columnIndex })=> {
    if (columnIndex === 0) {
      if (rowIndex % state.formObj.configs.length === 0) {
        return {
          rowspan: state.formObj.configs.length,
          colspan: 1
        };
      } else {
        return {
          rowspan: 0,
          colspan: 0 
       };
      }
    } 
 }