VUE+Element动态可编辑表格

做项目的时候遇到一个需求，做一个车站车次的时刻表，可以添加删除行或者列，实现效果如下：

效果图

这个表格使用的是Element-UI，第一行减号icon其实是表格的表头部分，最左边的减号icon是表格的第一列。表格的第二行，也就是显示车次名的那一行，在tableData对应的对象里，记录的是车次名，其余行都是记录发车时刻。colList是所有车次名组成的数组，新增行就是在tableData里新增一个对象，并且把每一个车次设为空，新增列则是将tableData里每一个对象都新增一个车次属性,index是一个数字，每次使用完会自增，保证每个车次名都是唯一的，以下是实现代码：

在写这个页面的时候，花最多时间的不是上面的样式和逻辑，其实是处理数据，从后端拿到的数据是要处理过才能显示在页面，保存的数据时候也要处理成后端需要的样子。