别写死表单了！el-form 动态化 + 智能全选 + 数据联动，这才是高端操作

原创

于 2025-09-30 21:30:00 发布 · 241 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #javascript #开发语言

在这里插入图片描述
关注公众号可免费查看vip文章

如图所示，
需求如下：

用户选择了设备（不确定数量），需要根据当前设备的路数动态生成表单，且各表单独立。
每个表单可独立查看参数，且每组要整体计算总容量。
每个表单可单选，和全选（所有设备都选中），可通过右上角按钮统一更改所有表单数据。

直接上代码：

一、先生成数据结构

// 通过已有的设备数，动态生成form及选择项等数据结构
middleList = [
	{
   
   isno: '23133', pvLen: '3'},
	{
   
   isno: '23334', pvLen: '6'}
]
// map可生成一个新数组，且预制了数据结构，方便后续数据双向绑定。
this.step2List = middleList.map(item => {
   
   
          return {
   
   
            ...item,
            totalCap: 0,
            vForList: Array.from({
   
    length: Number(item.pvLen)}, (_, i) => {
   
   
              return {
   
   
                check: false,
                showFlag: false,
                index: i,
                modelTypeList: [],
                formList: {
   
   
                  index: i,
                  company: '',
                  model: '',
                  cAmount: undefined,
                  cap: '',
                },
                descList,
              }
            }),
          }
        })

二、表单结构一览

<div class="flex justify-between items-center w-full">
   <div class="all-select">
     // 是否全选，主要依赖indeterminate 和 v-model,indeterminate可控制半选效果，isAllSelected用于全选和未选效果。
     <el-checkbox :indeterminate="isIndeterminate" v-model="isAllSelected" @change="handleSelectAll">
       全选
     </el-checkbox>
   </div>
   <div>
     <el-button 
       type="primary" 
       size="small" 
       :disabled="!canBatchSet"
       @click="visible = true"
     >
       批量组件设置
     </el-button>
   </div>
</div>
<div class="flex flex-col">
// 表单结构，所见即所得，通过v-for嵌入v-for，可以实现多组，且多子项的渲染。
 <div v-for="item in step2List" :key="item.isno" class="inv-item">
   <div class="flex justify-between items-center inv-head">
     <div>{
   
   {
   
   $t('diagnosis.inverterSerialNumber')}}：{
   
   {
   
    item.isno }}</div>
     <div>{
   
   {
   
   $t('diagnosis.totalCapacity')}}：{
   
   {
   
    item.totalCap ? item.totalCap : '-'}}</div>
   </div>
   <div class="flex flex-col pv-item">
     <div v-for="(it, index) in item.vForList" :key=