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

需求

项目中需要提供一个动态表单，如图：

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

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

思路

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

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

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

实现

data

managerList:[{
   userId:undefined,
   nickName:undefined,
   phonenumber:undefined
}],

template 

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

<el-table :data="managerList">        
        <el-table-column