elementUi + table realizes table data scrolling
Refer to vue and elementUI CDN
// reference elementUI CDN
<script src="//i2.wp.com/unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="//i2.wp.com/unpkg.com/element-ui/lib/index.js"></script>
// reference VUE CDN
<script src="//i2.wp.com/unpkg.com/vue@2/dist/vue.js"></script>
1. Page code
<div id="app">
<el-table ref="table" class="table2" height="350" :data="tableData">
<el-table-column prop="data1" label="serial number" align="center">
</el-table-column>
<el-table-column prop="data2" label="Department" align="center">
</el-table-column>
</el-table>
</div>
2. Data
new Vue({<!-- -->
el: '#app',
data: function () {<!-- -->
return {<!-- -->
tableData: [
{<!-- -->
data1: "1",
data2: "Surgery operating room"
},
{<!-- -->
data1: "2",
data2: "Medical Operating Room"
},
{<!-- -->
data1: "3",
data2: "Osteoarthritis"
},
{<!-- -->
data1: "4",
data2: "Department of Anesthesiology"
},
{<!-- -->
data1: "5",
data2: "heart"
},
{<!-- -->
data1: "6",
data2: "Sports Medicine"
},
{<!-- -->
data1: "7",
data2: "Osteoarthritis"
},
{<!-- -->
data1: "8",
data2: "Sports Medicine"
},
{<!-- -->
data1: "7",
data2: "Spine Surgery"
},
{<!-- -->
data1: "9",
data2: "The First Ward of Cardiovascular Medicine"
},
{<!-- -->
data1: "10",
data2: "The Second Ward of Cardiovascular Medicine"
},
{<!-- -->
data1: "11",
data2: "Cardiovascular Surgery"
},
],
}
}
})
3. Scroll logic
mounted() {<!-- -->
// Get the real DOM after the form is mounted
const table = this. $refs. table
// Get the div element that carries the data in the table
const divData = table. bodyWrapper
// After getting the element, time the element to increase the distance from the top to realize the scrolling effect (this configuration is to move 1 pixel every 100 milliseconds)
setInterval(() => {<!-- -->
// The element increments by 1 pixel from the top
divData.scrollTop += 1
// Determine whether the element is scrolled to the bottom (visual height + distance from top = entire height)
if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {<!-- -->
// Reset the table distance from the top
divData.scrollTop = 0
}
}, 100)
}
Complete code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
<el-table ref="table" class="table2" height="350" :data="tableData">
<el-table-column prop="data1" label="serial number" align="center">
</el-table-column>
<el-table-column prop="data2" label="Department" align="center">
</el-table-column>
</el-table>
</div>
</body>
<!-- import Vue before Element -->
<script src="//i2.wp.com/unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="//i2.wp.com/unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({<!-- -->
el: '#app',
data: function () {<!-- -->
return {<!-- -->
tableData: [
{<!-- -->
data1: "1",
data2: "Surgery operating room"
},
{<!-- -->
data1: "2",
data2: "Medical Operating Room"
},
{<!-- -->
data1: "3",
data2: "Osteoarthritis"
},
{<!-- -->
data1: "4",
data2: "Department of Anesthesiology"
},
{<!-- -->
data1: "5",
data2: "heart"
},
{<!-- -->
data1: "6",
data2: "Sports Medicine"
},
{<!-- -->
data1: "7",
data2: "Osteoarthritis"
},
{<!-- -->
data1: "8",
data2: "Sports Medicine"
},
{<!-- -->
data1: "7",
data2: "Spine Surgery"
},
{<!-- -->
data1: "9",
data2: "The First Ward of Cardiovascular Medicine"
},
{<!-- -->
data1: "10",
data2: "The Second Ward of Cardiovascular Medicine"
},
{<!-- -->
data1: "11",
data2: "Cardiovascular Surgery"
},
],
}
},
mounted() {<!-- -->
// Get the real DOM after the form is mounted
const table = this. $refs. table
// Get the div element that carries the data in the table
const divData = table. bodyWrapper
// After getting the element, time the element to increase the distance from the top to realize the scrolling effect (this configuration is to move 1 pixel every 100 milliseconds)
setInterval(() => {<!-- -->
// The element increments by 1 pixel from the top
divData.scrollTop += 1
// Determine whether the element is scrolled to the bottom (visual height + distance from top = entire height)
if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {<!-- -->
// Reset the table distance from the top
divData.scrollTop = 0
}
}, 100)
}
})
</script>
</html>