ul、li替换el-table并使用定时器实现列表自动滚动效果
使用ul、li替换el-table并加入列表自动滚动效果
ul、li替换el-table
存在以下两个问题:
- 为什么要使用ul、li替换el-table?
el-table是饿了么的表格组件,存在一定的局限性。首先
(1)不一定所有的前端项目都是用vue和饿了么,加上饿了么组件安装后会使得项目比较大,在单页面简单应用中性价比不是非常的高。
(2)饿了么自带的组件样式已经封装好了,我们再对其样式进行修改,比如说后面要说到的给el-table加入自动滚动的功能就可能设置不成功,样式会被覆盖,没有ul、li来得清楚。
(3)ul、li的可塑性比较高,虽然el-table封装后自带一些方法很好用,但是也会产生一些问题,当出现问题的时候可以替换成ul、li查看问题是否解决,代价比较小。
- 如何使用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样式不建议直接列出来(即都处于同级),而要根据标签的嵌套关系进行样式的嵌套,防止样式污染。