需求
项目中需要提供一个动态表单,如图:
当我点击添加时,便添加一行;点击右边的删除时,便删除这一行。
至少要有一行数据,但是没有上限。
思路
这种每一行的数据固定,但是不定行数的,很容易想到使用el-table来实现,它可以循环读取:data所绑定的数组,来生成行数据,不同的是:
1、table里面的每一个cell,需要放置一个input来支持用户编辑。
2、最后一列放置两个button,响应用户添加或删除行的需求
实现
data
managerList:[{
userId:undefined,
nickName:undefined,
phonenumber:undefined
}],
template
因为要求至少有一行数据,所以删除按钮增加一个判断,v-if="managerList.length > 1",当只剩一