缘起

刚接触vue+elementUI开发，项目开发中遇到一个问题要往一个表格中动态添加一行，其中一列要选择多个值插入，问题抽象为下图。
在这里插入图片描述

在这里插入图片描述
添加一个空行，实现方式

<el-table :data="tableData" border height="300" style="width: 100%;"  > 
table数据绑定在tableData上，tableData是一个空的数组类型，给添加按钮添加一个addData方法，
方法如下
addData()
{
   this.tableData.push({ 
     edit: true,                   
    });
}

在这里插入图片描述

在这里插入图片描述

下面是关键，核心就是利用自定义模板和scope.$index和scope.row两个方法

// 拿到某一行的index----------scope.$index
// 拿到某一行的数据-----------scope.row

比如用户输入的名字，如何做到添加一个新行的时候不自动获取到上一行输入的名字，用户姓名数据为通过自定义模板绑定到username，通过scope.row对应到这一行

选择队友时传入当前行的index，添加一个currentRowIndex属性

在这里插入图片描述

在这里插入图片描述
注意使用this.$set不刷新页面强制更新table数据。data中数据，都是响应式。也就是说，如果操作data中的数据，视图会实时更新；
但在实际开发中，遇到过一个坑：若data中数据类型较为复杂，方法methods中改变对象的属性，视图也就是页面并不会改变
原因是vue监听不到数据类型特别复杂的属性。

在这里插入图片描述
在这里插入图片描述
再添加一行，与上一行无关，实现行行间数据独立
在这里插入图片描述

源码获取链接

clone下来看是否满足你的需求

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue