How to use el-table to realize round robin data list in vue
This article mainly introduces "vue how to use el-table to achieve round robin data list". In daily operation, I believe many people have doubts about how vue uses el-table to achieve circular carousel data list. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the question of "how vue uses el-table to achieve circular carousel data list". Next, please follow the editor to study!
Use el-table round robin data list
Because it is developed in the intranet, it is very troublesome to install the plug-in guide package. If you have conditions, you can download the plug-in implementation. I will post the code for hand masturbation here.
The effects that need to be achieved are as follows: (taken by mobile phone, some paste)
Most of the implementation is to listen to whether it reaches the bottom of the div, and if it reaches the bottom, it jumps directly to the top. This sense of experience is not very good, and does not achieve the real effect of rotation.
Table data, devData I bound an empty array, because I am really too lazy to knock, according to reason, the ranking should be obtained from api, not index.
{{scope.$index + 1}} name export defalut {dsta () {return {devData: []} export defalut {created () {var isScroll = true / / can also be defined in data this.$nextTick (() = > {let div = document.getElementsByClassName ('el-table__body-wrapper') [0) ] div.style.height = '110px' div.addEventListener (' mouseenter' () = > {isScroll = false}) div.addEventListener ('mouseleave' () = > {idScroll = true}) let t = document.getElementByClassName ('el-table__body') [0] setInterval (() = > {if (isScroll) {let data = this.devData [0] setTimeout () = > {this.devData.push (data) t.style.transition =' All .5s' t.style.marginTop ='- 41px'} SetTimeout (() = > {this.devData.splice (0jue 1) t.style.transition = 'all 0s ease 0s' t.style.marginTop =' 0'}, 1000)}} 2500)})}} vue el-table simple carousel created () {this.$nextTick () = > {this.tableData_dibiao () / / carousel})} TableData_dibiao () {const table = this.$refs.tableData_realtime const divData = table.bodyWrapper this.dibiao_clear=setInterval (() = > {divData.scrollTop + = 1 if (divData.clientHeight + divData.scrollTop = = divData.scrollHeight) {divData. ScrollTop = 0}} Hover_dibiao () {/ / move the mouse into the clearing timer (pause the carousel) clearInterval (this.dibiao_clear)}, leave_dibiao () {/ / move the mouse out to continue to execute the round this.tableData_dibiao ()}, so far The study on "how vue uses el-table to achieve round robin data list" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
