后台管理系统，需要这个功能点的特别多，但Element UI 的table组件本身是不提供的，所以需要自行拓展一下。
在这里，给大家写一个简单的示例，希望对小伙伴们有所帮助。
先看看效果图：
我们直接去Element UI 官网 把 table组件的代码copy过来
{{scope.row.tag}}
稍稍的修整了一下，把tags的filters提到data里面作为变量了，后续可以用。
然后我们添加一个按钮，来添加行
table动态插入行
添加一条
...
...
add方法，向el-table的数据源tableData里面push一条新的数据，并且添加一个字段，我这里叫status(名字随便啦)。主要用来区分这条数据的当前状态，是编辑态，还是已经保存了的。1就是编辑态，如果保存了，我们就改为0。
有了status这个状态，我们就去修改el-table组件，根据status这个状态来判断，是显示可以编辑，还是不可编辑。
el-table组件修改这时候，我们就去自定义每列内容
日期列
...
v-else>{{scope.row.date}}
判断，如果scope.row.status有值（编辑态），我们就用日期组件el-date-picker，否则就用span标签，直接渲染数据。
这里日期组件同样可以直接使用v-model双向绑定。
同理完成其他列
姓名
地址
v-else>{{scope.row.address}}
标签
{{scope.row.tag}}
上面用到了1个变量,用来选择城市的，我们在data里面添加一下
...
data() {
return {
cityList: ['北京', '深圳', '上海']
...
}
}
这样就基本完成了第一张图的功能，但是需要新增的时候，同时保存没有保存的功能。
保存这里我们会用到上面提到过的status，1是编辑态，如果保存了，我们就改为0。
ok，在新增的时候，我们先判断，有没有未保存的数据，也就是有没有数据的status为1，如果是1，我们就将这条数据的status改为0。
...
add() {
this.tableData.map(item=>{
if(item.status){
item.status = 0;
}
return item;
})
...
}
是不是超级简单了？
这里我们其实还有一个问题，日期重新选择，保存后，格式不对，这个问题就留给大家了？看看你们有什么办法来解决吧？期待你的答案。
