动态增删表格

期望目标:实现一个能通过按钮来动态增加表格栏,每次能添加一行,每行末尾有一个删减按钮。

复制代码
<el-button type="text" class="primary"
         @click="addMember()">+添加</el-button>
<el-table
        :data="memberList"
        style="width: 100%"
        :header-cell-style="{
          background: '#fafafa',
          color: '#aaa',
          fontSize: '15px',
      }"
      >
        <el-table-column prop="index" label="序号" width="60">
          <template slot-scope="scope">
            <span>{{ getMemberIndex(scope.$index) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="facilityName" label="设施名称">
          <template slot-scope="scope">
            <el-select v-model="scope.row.facilityName" placeholder="请选择名称" clearable>
              <el-option v-for="dict in dict.type.data_facilities_name" :label="dict.label" :value="dict.value"  />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="facilitySpecificType" label="具体类型">
          <template slot-scope="scope">
            <el-select v-model="scope.row.facilitySpecificType" placeholder="请选择类型" clearable>
              <el-option v-for="dict in dict.type.data_facilities_type" :label="dict.label" :value="dict.value"/>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="facilityLocation" label="设施位置">
          <template slot-scope="scope">
            <el-select v-model="scope.row.facilityLocation" placeholder="请选择位置" clearable>
              <el-option v-for="dict in dict.type.data_equipment_location" :label="dict.label" :value="dict.value"/>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="facilityTp" label="规格">
          <template slot-scope="scope">
            <el-input v-model="scope.row.facilityTp"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="accountabilityUnit" label="责任单位">
          <template slot-scope="scope">
            <el-input v-model="scope.row.accountabilityUnit"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.$index,'memberList')"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

// 添加杆件数据按钮
    addMember() {
      var member = {
        index: this.dataId++,
        facilityNo: '',
        facilityName: '',
        facilitySpecificType: '',
        facilityLocation: '',
        facilityTp: '',
        accountabilityUnit: '',
      };
      this.memberList.push(member);
    },

效果:

遇到的问题一:在删减时,当前所有行的序号需要自动删减,重新计算变更序号

复制代码
// 删除行数据后序号自动连贯更新
    getMemberIndex(index) {
      return this.memberList.slice(0, index + 1).length ;
    },
/** 删除按钮操作 */
    handleDelete(index, listName) {
      if (index !== -1 && listName =="memberList") {
        this.memberList.splice(index, 1)
      }
    },

给序号那一栏字段单独重设,动态变更index,<span>{{ getMemberIndex(scope.$index) }}</span>,每次删除一行,调用handleDelete函数,再用getMember重新计算一遍所有序号

如果有数据验证的需求,就需要在table外面再嵌套一层form,因为只有el-form表单猜有数据验证的功能。

<el-form :model="memberForm" :rules="rules" ref="memberForm"></el-form>

问题二:

多个表单同时用一个接口提交,在提交数据表单时,后端要求有特殊的数据结构,需要将获取到的多个表单数据重新按要求整合。新设立一个json字段存储

复制代码
/** 提交按钮 */
    async submitForms() {
      // 构建数据结构
      const facilitiesData = {
        pointId: this.pointForm.pointId,
        pointName: this.pointForm.pointName,
        memberList: this.memberList.map(member => ({
          facilityName: member.facilityName,
          facilitySpecificType: member.facilitySpecificType,
          facilityLocation: member.facilityLocation,
          facilityTp: member.facilityTp,
          accountabilityUnit: member.accountabilityUnit,
        })),
      }
      // 发送请求添加设施
      await addFacilities(facilitiesData).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.goBack();
      })
    },
相关推荐
程序猿阿伟1 小时前
《首屏加载优化手册:Vue3+Element Plus项目提速的技术细节》
前端·javascript·vue.js
麦麦大数据2 小时前
D030知识图谱科研文献论文推荐系统vue+django+Neo4j的知识图谱|论文本文相似度推荐|协同过滤
vue.js·爬虫·django·知识图谱·科研·论文文献·相似度推荐
尘觉2 小时前
面试-浅复制和深复制?怎样实现深复制详细解答
javascript·面试·职场和发展
fruge3 小时前
Vue Pinia 状态管理实战指南
前端·vue.js·ubuntu
绝无仅有3 小时前
某教育大厂面试题解析:MySQL索引、Redis缓存、Dubbo负载均衡等
vue.js·后端·面试
chxii4 小时前
ISO 8601日期时间标准及其在JavaScript、SQLite与MySQL中的应用解析
开发语言·javascript·数据库
没逛够4 小时前
Vue 自适应高度表格
javascript·vue.js·elementui
苹果醋36 小时前
JAVA面试汇总(二)多线程(五)
运维·vue.js·spring boot·nginx·课程设计
咖啡の猫6 小时前
Vue初始化脚手架
前端·javascript·vue.js
一 乐6 小时前
汽车销售|汽车推荐|基于SprinBoot+vue的新能源汽车个性化推荐系统(源码+数据库+文档)
java·数据库·vue.js·汽车·毕设·汽车个性化推荐