最终效果图:
步骤一
钩子:
钩子代码:
async created() {
//食堂信息滚动
if (this.tableData.length > 2) { //判断表格的长度
this.a = setInterval(() => {
//一直调用
this.restaurantTableMove(); //调用方法
}, 100);
}
},
步骤二
钩子调用的方法
代码:
///食堂信息滚动
restaurantTableMove() {
var len = this.$refs.restauranttable.bodyWrapper.scrollHeight / 2 + 6; //进度条最大高度,可以加快滚动速度
this.progressbarLen1 += 1;
this.$refs.restauranttable.bodyWrapper.scrollTop = this.progressbarLen1;
if (this.progressbarLen1 > len) {
this.progressbarLen1 = 0;
this.$refs.restauranttable.bodyWrapper.scrollTop = 0;
}
},
步骤三
进度条长度(因为滚动方法必要)
代码:
progressbarLen1: 0, //标记进度条长度
步骤四
重点:1.引用ref 2.高度height
表格代码:(忽略表格数据)
<el-table
ref="restauranttable" // 引用
height="200px" // 高度
border
:header-cell-style="tableHeaderColor"
:data="tableData"
style="width: 100%;color:#FFFFFF">
<el-table-column
prop="date"
label="序号"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="仓库">
</el-table-column>
<el-table-column
prop="address"
label="品名">
</el-table-column>
<el-table-column
prop="data"
label="入库时间">
</el-table-column>
<el-table-column
prop="amount"
label="数量">
</el-table-column>
</el-table-column>
<el-table-column
prop="status"
label="状态">
</el-table-column>
</el-table>