ul、li替换el-table并使用定时器实现列表自动滚动效果

使用ul、li替换el-table并加入列表自动滚动效果

ul、li替换el-table

存在以下两个问题：

1. 为什么要使用ul、li替换el-table？

el-table是饿了么的表格组件，存在一定的局限性。首先
（1）不一定所有的前端项目都是用vue和饿了么，加上饿了么组件安装后会使得项目比较大，在单页面简单应用中性价比不是非常的高。
（2）饿了么自带的组件样式已经封装好了，我们再对其样式进行修改，比如说后面要说到的给el-table加入自动滚动的功能就可能设置不成功，样式会被覆盖，没有ul、li来得清楚。
（3）ul、li的可塑性比较高，虽然el-table封装后自带一些方法很好用，但是也会产生一些问题，当出现问题的时候可以替换成ul、li查看问题是否解决，代价比较小。

2. 如何使用ul、li替换el-table？

<ul><li>每一行的内容</li></ul>
每一个<li></li>都代表一行，如果要循环列表展示可以在<li>中使用v-for循环数据。若每一行中有n列则可以添加n个<p>{{ item.data }}</p>进行展示。
因为el-table可以直接在组件的min-width或者width属性中控制每个列的宽度，同样的我们也可以给每个<p>设置统一的.class: { width:50% }即可。（每列的宽度可以设置不同的width控制）

使用定时器实现列表自动滚动

这个功能我是参考vue+定时器实现滚动列表特效这位作者大大的简书，但是对其进行了修改。

修改一：由于我不需要背景图片，所以将背景图片删除后修改了各个样式的数据以适应项目的需要。（修改行高的时候也要修改.marquee_top中的margin-top属性，改为和行高一样才能滚动同行高的距离）
修改二：由于el-table组件中有stripe斑马纹属性，为了模仿，我在<li>中加入如下css：

// 括号内even是奇数行，如果是odd则为偶数行
.marquee_list li:nth-child(even) {
      background: #fafafa;
    }

修改三：css的class样式不建议直接列出来（即都处于同级），而要根据标签的嵌套关系进行样式的嵌套，防止样式污染。