vue2实践:el-table实现由用户自己添加删除行数的动态表格

需求

项目中需要提供一个动态表单,如图:

当我点击添加时,便添加一行;点击右边的删除时,便删除这一行。

至少要有一行数据,但是没有上限。

思路

这种每一行的数据固定,但是不定行数的,很容易想到使用el-table来实现,它可以循环读取:data所绑定的数组,来生成行数据,不同的是:

1、table里面的每一个cell,需要放置一个input来支持用户编辑。

2、最后一列放置两个button,响应用户添加或删除行的需求

实现

data

javascript 复制代码
managerList:[{
   userId:undefined,
   nickName:undefined,
   phonenumber:undefined
}],

template

因为要求至少有一行数据,所以删除按钮增加一个判断,v-if="managerList.length > 1",当只剩一行数据时,删除按钮隐藏,不允许再点击

html 复制代码
<el-table :data="managerList">        
        <el-table-column label="姓名" align="center" prop="nickName">
          <template slot-scope="scope">
            <el-input v-model.trim="scope.row.nickName" placeholder="请输入项目经理姓名"/>
          </template>
        </el-table-column>
        <el-table-column label="电话号码" align="center" prop="phonenumber">
          <template slot-scope="scope">
            <el-input v-model.trim="scope.row.phonenumber" placeholder="请输入电话号码"/>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" prop="status">
          <template slot-scope="scope">
            <el-link type="primary" icon="el-icon-plus" :underline="false" @click="addRow">新增</el-link>
            <el-link type="primary" icon="el-icon-delete-solid" :underline="false" @click="deleteRow(scope.$index,scope.row)"
                     v-if="managerList.length > 1">删除</el-link>
          </template>
        </el-table-column>
      </el-table>

methods

input不需要特殊处理。但是两个按钮要响应用户操作:

新增

当点击新增时,希望增加一行。基于Vue的响应式原理,data中的managerList数组增加一项即可,使用managerList.push;

javascript 复制代码
addRow(){
      let manager = {
        userId:undefined,
        nickName: undefined,
        phonenumber: undefined
      };
      this.managerList.push(manager);
},

删除

当点击删除时,希望减少一行,同理,managerList中该行数据删除:

javascript 复制代码
deleteRow(index,row){
      this.managerList.splice(index, 1);
},

如果这里全部都是新增数据,这样就可以了,但是,如果其中有初始数据,而删除的数据又是初始数据的话,需要记录哪个数据要被删除,以便保存时进行真正的数据删除

javascript 复制代码
deleteRow(index,row){
      this.managerList.splice(index, 1);

      //获取被删除的用户id,以便保存时将账户状态置为禁用
      if(row.userId != "" && row.userId != undefined){
        this.delUsers.push(row);
      }
},

数据校验

javascript 复制代码
validateInput(){
      for (let i = 0; i < this.managerList.length; i++) {
        this.managerList[i].nickName = this.managerList[i].nickName.trim();
        if (this.managerList[i].nickName === undefined || this.managerList[i].nickName === ""
          || this.managerList[i].nickName === null
          || this.managerList[i].phonenumber === undefined || this.managerList[i].phonenumber === "" ||
          this.managerList[i].phonenumber === null) {
          this.msgError(`第 ${i + 1} 项姓名或手机号码不能为空`);
          return false;
        }
        const regex = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
        if (!regex.test(this.managerList[i].phonenumber)) {
          this.msgError(`第 ${i + 1} 项电话号码格式错误`);
          return false;
        }
        //判断重复项
        for (let j = 0; j < i; j++) {
          if (this.managerList[j].nickName === this.managerList[i].nickName &&
            this.managerList[j].phonenumber === this.managerList[i].phonenumber) {
            this.msgError(`第 ${i + 1} 项"${this.managerList[i].nickName}"重复添加`);
            return false;
          }
        }
      }
      return true;
    },

保存

javascript 复制代码
submitManagerList(){
      if(this.validateInput()){
        this.removeManagers();
        this.addOrUpdateManagers();        
      }
},

至此,可以由用户自己控制行数的动态表格就完成了。

相关推荐
袁煦丞27 分钟前
【局域网秒传神器】LocalSend:cpolar内网穿透实验室第418个成功挑战
前端·程序员·远程工作
江城开朗的豌豆28 分钟前
Vuex数据突然消失?六招教你轻松找回来!
前端·javascript·vue.js
好奇心笔记39 分钟前
ai写代码随机拉大的,所以我准备给AI出一个设计规范
前端·javascript
江城开朗的豌豆39 分钟前
Vue状态管理进阶:数据到底是怎么"跑"的?
前端·javascript·vue.js
用户214118326360239 分钟前
dify案例分享-Dify v1.6.0 重磅升级:双向 MCP 协议引爆 AI 生态互联革命
前端
程序员海军40 分钟前
AI领域又新增协议: AG-UI
前端·openai·agent
我想说一句42 分钟前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜43 分钟前
CommonJS与ESM
前端·javascript
LaoZhangAI43 分钟前
GPT-image-1 API如何传多图:开发者完全指南
前端·后端
G等你下课1 小时前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试