一、英雄榜实现

1、引入element Lib 和VUE

<head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>英雄榜</title><link rel="stylesheet" href="js/element_lib/theme-chalk/index.css"><link rel='stylesheet' href='assets/myCss/gudianxiaoshuo.css' charset="utf-8">
</head>
<link rel='stylesheet' href='assets/css/kuaileketang.css' charset="utf-8">
<script src="js\vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/comp/comp_headBtns.js" charset="utf-8"></script>

2、设置滚动条动态显示

<style>::-webkit-scrollbar {width: 16px;display:var(--scrollbar);}::-webkit-scrollbar-thumb {background:var(--scrollCorlor);box-shadow: inset 0 0 4px green; border-radius: 30px;}#mainContent:fullscreen {  background-color:var(--fullCorlor);}#mainContent{padding-left: 100px;padding-right:100px;}
</style>

1）设置对应的VUE参数名：scrollHiddenVar

:style="{'--fullCorlor': foolcolorVar,'--scrollCorlor': scrollcolorVar,'--scrollbar': scrollHiddenVar}">

2）VUE data定义

     scrollHiddenVar: 'none',

3）mounted 设置鼠标监听事件

   window.addEventListener('mousemove', this.myEventFunc);

4）监听方法

        myEventFunc(event) {let x = event.pageX;let rect = document.getElementById('mainContent').getBoundingClientRect();if (x > rect.right - 50)this.scrollHiddenVar = 'inline';elsethis.scrollHiddenVar = 'none';}

3、设置element Table

            <el-main1 id='mainContent' style='overflow:auto;' :style="{'--fullCorlor': foolcolorVar,'--scrollCorlor': scrollcolorVar,'--scrollbar': scrollHiddenVar}"><el-table :show-header=true :data='tableData1' :span-method='SpanMethod' :row-style='RowStyle' :cell-style='getRowClass' :header-row-style='getRowClass' :header-cell-style='headerStyle' :highlight-current-row=true border header-align='center' style='width:100%;margin-top:20px'><el-table-column align='center' prop='id' label='英雄榜' width='180'></el-table-column><el-table-column align='center' prop='name' label='姓名'></el-table-column><el-table-column align='center' prop='score' label='分数'></el-table-column></el-table><el-table :show-header=false :data='tableData2' :span-method='SpanMethod' :row-style='RowStyle' :cell-style='getRowClass' :header-row-style='getRowClass' :header-cell-style='headerStyle' :highlight-current-row=true border header-align='center' style='width:100%;margin-top:20px'><el-table-column align='center' prop='id' label='英雄榜' width='180'></el-table-column><el-table-column align='center' prop='name' label='姓名'></el-table-column><el-table-column align='center' prop='score' label='分数'></el-table-column></el-table><el-table :show-header=false :data='tableData3' :span-method='SpanMethod' :row-style='RowStyle' :cell-style='getRowClass' :header-row-style='getRowClass' :header-cell-style='headerStyle' :highlight-current-row=true border header-align='center' style='width:100%;margin-top:20px'><el-table-column align='center' prop='id' label='英雄榜' width='180'></el-table-column><el-table-column align='center' prop='name' label='姓名'></el-table-column><el-table-column align='center' prop='score' label='分数'></el-table-column></el-table><el-table :show-header=false :data='tableData4' :span-method='SpanMethod' :row-style='RowStyle' :cell-style='getRowClass' :header-row-style='getRowClass' :header-cell-style='headerStyle' :highlight-current-row=true border header-align='center' style='width:100%;margin-top:20px'><el-table-column align='center' prop='id' label='英雄榜' width='180'></el-table-column><el-table-column align='center' prop='name' label='姓名'></el-table-column><el-table-column align='center' prop='score' label='分数'></el-table-column></el-table><el-table :show-header=false :data='tableData5' :span-method='SpanMethod' :row-style='RowStyle' :cell-style='getRowClass' :header-row-style='getRowClass' :header-cell-style='headerStyle' :highlight-current-row=true border header-align='center' style='width:100%;margin-top:20px'><el-table-column align='center' prop='id' label='英雄榜' width='180'></el-table-column><el-table-column align='center' prop='name' label='姓名'></el-table-column><el-table-column align='center' prop='score' label='分数'></el-table-column></el-table><p></p></el-main1>

4、table 数组

function getTableNum() { return 5; }function getTable1() {var tableData = [{ id: '至尊王者 4人', name: '刘心莹', score: 231 },{ id: '至尊王者 4人', name: '梁维佳', score: 170 },{ id: '至尊王者 4人', name: '陈玉雨', score: 127 },{ id: '至尊王者 4人', name: '王静萱', score: 114 }]return tableData;
}function getTable2() {var tableData = [{ id: '王者 13人', name: '黄健桐', score: 106 },{ id: '王者 13人', name: '梁舒然', score: 104 },{ id: '王者 13人', name: '刘江彬', score: 98 },{ id: '王者 13人', name: '陀天成', score: 95 },{ id: '王者 13人', name: '林喜兰', score: 93 },{ id: '王者 13人', name: '张嘉怡', score: 93 },{ id: '王者 13人', name: '甘紫琳', score: 92 },{ id: '王者 13人', name: '刘航兰', score: 91 },{ id: '王者 13人', name: '谭李明', score: 90 },{ id: '王者 13人', name: '黎挺彬', score: 90 },{ id: '王者 13人', name: '李柱炫', score: 90 },{ id: '王者 13人', name: '梁韵怡', score: 90 },{ id: '王者 13人', name: '郑海华', score: 90 }]return tableData;
}function getTable3() {var tableData = [{ id: '黄金 8人', name: '李光森', score: 88 },{ id: '黄金 8人', name: '梁健宇', score: 88 },{ id: '黄金 8人', name: '梁欣棋', score: 88 },{ id: '黄金 8人', name: '欧家成', score: 88 },{ id: '黄金 8人', name: '陈俊昌', score: 88 },{ id: '黄金 8人', name: '秦子航', score: 85 },{ id: '黄金 8人', name: '刘童瑶', score: 85 },{ id: '黄金 8人', name: '郑丽莎', score: 85 }]return tableData;
}function getTable4() {var tableData = [{ id: '白银 1人', name: '梁洪霖', score: 72 }]return tableData;
}function getTable5() {var tableData = [{ id: '青铜', name: '无' }]return tableData;
}

5、VUE 核心代码

new Vue({el: '#app',data: function() {return {fit: "contain",imgUrl: 'http://gudianxiaoshuo.com/js/logo.gif',gongzhonghaoUrl: 'http://gudianxiaoshuo.com/js/gongzhonghao.jpg',toutiaohaoUrl: 'http://gudianxiaoshuo.com/js/toutiaohao.png',options: [],colorArr: [],colorName: '默认',fontName: "宋体",fontSizeOptions: [],fontSize: 20,textColor: null,bgColor: null,showTip: true,foolcolorVar: 'rgb(255,255,255)',scrollcolorVar: 'rgb(255,255,255)',scrollHiddenVar: 'none',zanshangUrl: "",tableData1: [],tableData2: [],tableData3: [],tableData4: [],tableData5: [],tableData6: [],tableData7: [],tableData8: [],tableData9: [],tableData10: [],tableData11: [],tableData12: [],tableData13: [],tableData14: [],tableData15: [],tableData16: [],tableData17: [],tableData18: [],tableData19: [],tableData20: []}},methods: {open() {this.$message('右键，选择大声朗读即可');},closeTip() {localStorage.setItem('tipClosed', '1');},selectOne(fontName) {var fontFamily = "font-family:" + fontName;document.querySelector('#app').style.setProperty('font-family', fontName)localStorage.setItem('font', fontFamily);localStorage.setItem('fontName', fontName);},selectFontSize(fontSize) {// document.body.requestFullscreen();   document.querySelector('#app').style.setProperty('font-size', fontSize)localStorage.setItem('fontSize', fontSize);},selectColorName(colorIndex) {console.log(colorIndex);console.log(this.colorArr[colorIndex]);this.setTBColor(this.colorArr[colorIndex].textcolor, this.colorArr[colorIndex].bg);localStorage.setItem('corlorIndex', colorIndex);},setTBColor(textColor, bgColor) {document.querySelector('body').style.setProperty('background', bgColor)var x = document.querySelectorAll("p");var i;for (i = 0; i < x.length; i++) {x[i].style.color = textColor;}localStorage.setItem('bg', bgColor);localStorage.setItem('pColor', textColor);this.textColor = textColor;this.bgColor = bgColor;},el_colorPic_change() {this.setTBColor(this.textColor, this.bgColor);this.saveRand(this.textColor, this.bgColor);console.log(this.textColor)},saveRand(textColor, bgColor) {var lastElemName = this.colorArr[this.colorArr.length - 1].name;if (lastElemName == '随机色') {this.colorArr[this.colorArr.length - 1].bg = bgColor;this.colorArr[this.colorArr.length - 1].textcolor = textColor;} else {var fontElem = {};fontElem.name = '随机色';fontElem.bg = bgColor;fontElem.textcolor = textColor;this.colorArr.push(fontElem);}localStorage.setItem('Randbg', bgColor);localStorage.setItem('RandTColor', textColor);},rdmRgbColor() {const arr = [];for (let i = 0; i < 3; i++) {arr.push(Math.floor(Math.random() * 256));}const [r, g, b] = arr;var color = `rgb(${r},${g},${b})`;return color;},colorBtn: function(name) {console.log(name);if (name == "btn1") {this.setTBColor('rgb(89,89,89)', 'rgb(255,255,255)');} else if (name == "btn2") {this.setTBColor('rgb(91,70,54)', 'rgb(242,236,216)');} else if (name == "btn3") {this.setTBColor('rgb(51,51,51)', 'rgb(206,234,186)');} else if (name == "btn4") {this.setTBColor('rgb(157,159,163)', 'rgb(69,72,74)');} else if (name == "btn5") {this.setTBColor('rgb(181,172,162)', 'rgb(51,51,51)');} else if (name == 'rand') {let bgColor = this.rdmRgbColor();let textColor = this.rdmRgbColor();this.setTBColor(textColor, bgColor);this.saveRand(textColor, bgColor);} else if (name == 'full') {var bgColor = localStorage.getItem('bg');this.foolcolorVar = bgColor;this.scrollcolorVar = bgColor;document.getElementById('mainContent').requestFullscreen();} else if (name == 'fav') {var bHasScroll = this.bHasScrollbar();this.hideScroll();this.takeScreenshot();if (bHasScroll)this.showScroll();//    this.$message({// dangerouslyUseHTMLString: true,// message:'浏览器不支持自动添加收藏夹标签。请您使用快捷键   <strong style="color:red"><i> Ctrl+D</i> </strong>进行添加'}// );//this.scrollHiddenVar=scrollVar;}},hideScroll() {$("html").height($("window").height()).css({"overflow-y": "hidden"}); //弹出框时隐藏滚动条$("html").css("margin-right", 17); //隐藏滚动条时防止页面偏题},showScroll() {$("html").height($(window).height()).css({"overflow-y": "auto"}); //弹出框时隐藏滚动条$("html").css("margin-right", 0); //隐藏滚动条时防止页面偏题},bHasScrollbar() {return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);},myEventFunc(event) {let x = event.pageX;let rect = document.getElementById('mainContent').getBoundingClientRect();if (x > rect.right - 50)this.scrollHiddenVar = 'inline';elsethis.scrollHiddenVar = 'none';},myHandleSelect(key) {location.href = key;},SpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 0) {if (rowIndex === 0) {return {rowspan: 1000,colspan: 1};} else if (1 <= rowIndex && rowIndex <= 1000) {return {rowspan: 0,colspan: 0};}// else  if (rowIndex  === 4) {//   return {//     rowspan: 2,//     colspan: 1//   };// } // else if (5<=rowIndex  && rowIndex<=8) // {//   return {//     rowspan: 0,//     colspan: 0//   };// }           }},RowStyle({ row, column, rowIndex, columnIndex }) {// if (rowIndex <= 3) {//     let styleJson = {//         "background": "#FAF4FF"//     };//     return styleJson// } else if (rowIndex <= 6) {//     let styleJson = {//         "background": "#FFF7FB"//     };//     return styleJson// } else {//     let styleJson = {//         "background": "#DFFFDF"//     };//     return styleJson// }let styleJson = {"background": "rgb(255, 245, 247)"};return styleJson},getRowClass({ row, column, rowIndex, columnIndex }) {if (columnIndex == 0)return "background:rgb(217, 104, 49);color:#000;textAlign:center;";},headerStyle({ row, column, rowIndex, columnIndex }) {if (rowIndex == 0 && columnIndex == 0) {this.$nextTick(() => {// 获取表头的所有单元格let n = document.getElementsByClassName("el-table__header")[0].rows[0].cells// 将第二列表头单元格的colSpan设为2n[0].colSpan = 3// 将第三列表头单元格的display设为nonen[1].style.display = 'none'n[2].style.display = 'none'});}//  // 1.2 被覆盖的进行隐藏//   if (rowIndex === 0 && (columnIndex == 1 || columnIndex == 2)) {//     return {//       display: "none",//     };// }//  row[0].colSpan=3//  row[1].colSpan=0//  row[2].colSpan=0// if(columnIndex==2||columnIndex==1)//   return { display: "none" };return "background:rgb(255, 245, 247);color:#000;textAlign:center; fontSize:60px;";},takeScreenshot() {const node = document.getElementById('mainContent')html2canvas(node, {useCORS: true,height: node.offsetHeight,width: node.offsetWidth,scrollY: 0,scrollX: 0,backgroundColor: this.bgColor,scale: 2, // 处理模糊问题dpi: 300, // 处理模糊问题}).then(async (canvas) => {let oImg = new Image();oImg.src = canvas.toDataURL(); // 导出图片//document.body.appendChild(oImg);  // 将生成的图片添加到body//以下代码为下载此图片功能var triggerDownload = $("<a>").attr("href", oImg.src).attr("download", "英雄榜.png").appendTo("body");triggerDownload[0].click();triggerDownload.remove();})}},created() {console.log("beforeMount")if ($("#youshengHeader"))console.log("youshengHeader")// $("#youshengHeader").load('http://gudianxiaoshuo.com/js/youshengHeader.html')},beforeMount() {},mounted() {let tableNum = getTableNum();switch (tableNum) {case 1:this.tableData1 = getTable1();break;case 2:this.tableData1 = getTable1();this.tableData2 = getTable2();break;case 3:this.tableData1 = getTable1();this.tableData2 = getTable2();this.tableData3 = getTable3();break;case 4:this.tableData1 = getTable1();this.tableData2 = getTable2();this.tableData3 = getTable3();this.tableData4 = getTable4();break;case 5:this.tableData1 = getTable1();this.tableData2 = getTable2();this.tableData3 = getTable3();this.tableData4 = getTable4();this.tableData5 = getTable5();break;case 6:this.tableData1 = getTable1();this.tableData2 = getTable2();this.tableData3 = getTable3();this.tableData4 = getTable4();this.tableData5 = getTable5();this.tableData6 = getTable6();break;case 7:this.tableData1 = getTable1();this.tableData2 = getTable2();this.tableData3 = getTable3();this.tableData4 = getTable4();this.tableData5 = getTable5();this.tableData6 = getTable6();this.tableData7 = getTable7();break;case 8:this.tableData1 = getTable1();this.tableData2 = getTable2();this.tableData3 = getTable3();this.tableData4 = getTable4();this.tableData5 = getTable5();this.tableData6 = getTable6();this.tableData7 = getTable7();this.tableData8 = getTable8();break;case 9:this.tableData1 = getTable1();this.tableData2 = getTable2();this.tableData3 = getTable3();this.tableData4 = getTable4();this.tableData5 = getTable5();this.tableData6 = getTable6();this.tableData7 = getTable7();this.tableData8 = getTable8();this.tableData9 = getTable9();break;case 10:this.tableData1 = getTable1();this.tableData2 = getTable2();this.tableData3 = getTable3();this.tableData4 = getTable4();this.tableData5 = getTable5();this.tableData6 = getTable6();this.tableData7 = getTable7();this.tableData8 = getTable8();this.tableData9 = getTable9();this.tableData10 = getTable10();break;case 11:this.tableData1 = getTable1();this.tableData2 = getTable2();this.tableData3 = getTable3();this.tableData4 = getTable4();this.tableData5 = getTable5();this.tableData6 = getTable6();this.tableData7 = getTable7();this.tableData8 = getTable8();this.tableData9 = getTable9();this.tableData10 = getTable10();this.tableData11 = getTable11();break;case 12:this.tableData1 = getTable1();this.tableData2 = getTable2();this.tableData3 = getTable3();this.tableData4 = getTable4();this.tableData5 = getTable5();this.tableData6 = getTable6();this.tableData7 = getTable7();this.tableData8 = getTable8();this.tableData9 = getTable9();this.tableData10 = getTable10();this.tableData11 = getTable11();this.tableData12 = getTable12();break;case 13:this.tableData1 = getTable1();this.tableData2 = getTable2();this.tableData3 = getTable3();this.tableData4 = getTable4();this.tableData5 = getTable5();this.tableData6 = getTable6();this.tableData7 = getTable7();this.tableData8 = getTable8();this.tableData9 = getTable9();this.tableData10 = getTable10();this.tableData11 = getTable11();this.tableData12 = getTable12();this.tableData13 = getTable13();break;case 14:this.tableData1 = getTable1();this.tableData2 = getTable2();this.tableData3 = getTable3();this.tableData4 = getTable4();this.tableData5 = getTable5();this.tableData6 = getTable6();this.tableData7 = getTable7();this.tableData8 = getTable8();this.tableData9 = getTable9();this.tableData10 = getTable10();this.tableData11 = getTable11();this.tableData12 = getTable12();this.tableData13 = getTable13();this.tableData14 = getTable14();break;case 15:this.tableData1 = getTable1();this.tableData2 = getTable2();this.tableData3 = getTable3();this.tableData4 = getTable4();this.tableData5 = getTable5();this.tableData6 = getTable6();this.tableData7 = getTable7();this.tableData8 = getTable8();this.tableData9 = getTable9();this.tableData10 = getTable10();this.tableData11 = getTable11();this.tableData12 = getTable12();this.tableData13 = getTable13();this.tableData14 = getTable14();this.tableData15 = getTable15();break;case 16:this.tableData1 = getTable1();this.tableData2 = getTable2();this.tableData3 = getTable3();this.tableData4 = getTable4();this.tableData5 = getTable5();this.tableData6 = getTable6();this.tableData7 = getTable7();this.tableData8 = getTable8();this.tableData9 = getTable9();this.tableData10 = getTable10();this.tableData11 = getTable11();this.tableData12 = getTable12();this.tableData13 = getTable13();this.tableData14 = getTable14();this.tableData15 = getTable15();this.tableData16 = getTable16();break;case 17:this.tableData1 = getTable1();this.tableData2 = getTable2();this.tableData3 = getTable3();this.tableData4 = getTable4();this.tableData5 = getTable5();this.tableData6 = getTable6();this.tableData7 = getTable7();this.tableData8 = getTable8();this.tableData9 = getTable9();this.tableData10 = getTable10();this.tableData11 = getTable11();this.tableData12 = getTable12();this.tableData13 = getTable13();this.tableData14 = getTable14();this.tableData15 = getTable15();this.tableData16 = getTable16();this.tableData17 = getTable17();break;case 18:this.tableData1 = getTable1();this.tableData2 = getTable2();this.tableData3 = getTable3();this.tableData4 = getTable4();this.tableData5 = getTable5();this.tableData6 = getTable6();this.tableData7 = getTable7();this.tableData8 = getTable8();this.tableData9 = getTable9();this.tableData10 = getTable10();this.tableData11 = getTable11();this.tableData12 = getTable12();this.tableData13 = getTable13();this.tableData14 = getTable14();this.tableData15 = getTable15();this.tableData16 = getTable16();this.tableData17 = getTable17();this.tableData18 = getTable18();break;case 19:this.tableData1 = getTable1();this.tableData2 = getTable2();this.tableData3 = getTable3();this.tableData4 = getTable4();this.tableData5 = getTable5();this.tableData6 = getTable6();this.tableData7 = getTable7();this.tableData8 = getTable8();this.tableData9 = getTable9();this.tableData10 = getTable10();this.tableData11 = getTable11();this.tableData12 = getTable12();this.tableData13 = getTable13();this.tableData14 = getTable14();this.tableData15 = getTable15();this.tableData16 = getTable16();this.tableData17 = getTable17();this.tableData18 = getTable18();this.tableData19 = getTable19();break;case 20:this.tableData1 = getTable1();this.tableData2 = getTable2();this.tableData3 = getTable3();this.tableData4 = getTable4();this.tableData5 = getTable5();this.tableData6 = getTable6();this.tableData7 = getTable7();this.tableData8 = getTable8();this.tableData9 = getTable9();this.tableData10 = getTable10();this.tableData11 = getTable11();this.tableData12 = getTable12();this.tableData13 = getTable13();this.tableData14 = getTable14();this.tableData15 = getTable15();this.tableData16 = getTable16();this.tableData17 = getTable17();this.tableData18 = getTable18();this.tableData20 = getTable20();break;}var tip = localStorage.getItem('tipClosed');if (tip)this.showTip = false;var bgColor = localStorage.getItem('bg');var pColor = localStorage.getItem('pColor');if (bgColor && pColor) {this.textColor = pColor;this.bgColor = bgColor;document.querySelector('body').style.setProperty('background', bgColor);var x = document.querySelectorAll("p");var i;for (i = 0; i < x.length; i++)x[i].style.color = pColor;}var fontArr = getAllFont();for (i = 0; i < fontArr.length; i++) {var fontElem = {};fontElem.value = fontArr[i];fontElem.label = fontArr[i];this.options.push(fontElem);}let fontName = localStorage.getItem('fontName');if (fontName) {document.querySelector('#app').style.setProperty('font-family', fontName);this.fontName = fontName;}for (i = 20; i < 100; i++) {var fontElem = {};fontElem.value = i;fontElem.label = i;this.fontSizeOptions.push(fontElem);}let fontSize = localStorage.getItem('fontSize');if (fontSize) {document.querySelector('#app').style.setProperty('font-size', fontSize)this.fontSize = fontSize}window.addEventListener('mousemove', this.myEventFunc);this.colorArr = getAllColor();var Randbg = localStorage.getItem('Randbg');var RandTColor = localStorage.getItem('RandTColor');if (Randbg) {var fontElem = {};fontElem.name = '随机色';fontElem.bg = Randbg;fontElem.textcolor = RandTColor;this.colorArr.push(fontElem);}let colorIndex = localStorage.getItem('corlorIndex');console.log(colorIndex)console.log(this.colorArr)if (colorIndex && colorIndex < this.colorArr.length)this.colorName = this.colorArr[colorIndex].name;var zan = getWeixin();if (zan)this.zanshangUrl = zan;else {zan = getWeixinFromLocal();this.zanshangUrl = zan;}}
})

6、DEMO下载

https://download.csdn.net/download/shuilan0066/87383170

Vue+element 实现英雄榜功能相关推荐

vue element项目常见实现表格内部可编辑功能
目录前言正文 1.简单表格行内内部可编辑 2. 数据从后端取得表格行内可编辑 3.批量表格整体的可编辑结语前言后台系统都是各种表格表单编辑,整理了下常见的几种实现表格编辑的方式,希望有用.使 ...
vue+element 实现试卷答题功能，单选题 ,多选题，判断题，简答题（2.0版本，2021.3.25更新）
vue+element 实现试卷答题功能,单选题 ,多选题,判断题,简答题(2.0版本,2021.3.25更新) 文章目录 vue+element 实现试卷答题功能,单选题 ,多选题,判断题,简答 ...
前后端分离之评论功能前端（1）——django+mysql+vue+element+axios
评论系统前端一. 导入vue和element用到的组件二. 使用element设计页面 2.1 导航菜单 2.2 输入框 2.3 按钮 2.4 显示评论前言: 作者:神的孩子在歌唱大家好,我叫 ...
vue+element实现图片上传及裁剪功能（vue-cropper）
需求背景: 上传图片或者头像时,能够将图片进行裁剪(等比例缩放裁剪或非等比例裁剪) 效果图: 安装使用 1.安装 npm install vue-cropper // npm 安装 yarn add ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
超优 Vue+Element+Spring 中后端解决方案
今日推荐推荐一款开源 Java 版的视频管理系统推荐3个快速开发平台前后端都有项目经验又有着落了 14个项目转载:toutiao.com/i6911704074815767048 作者:we ...
html全局布局 vue_基于Vue+Element的电商后台管理系统
前言 mall项目后台管理系统的前端项目. 项目介绍 mall-admin-web是一个电商后台管理系统的前端项目,基于Vue+Element实现. 主要包括商品管理.订单管理.会员管理.促销管理.运 ...
【Vue 快速入门】从零开始搭建 VUE + Element UI后台管理系统框架
[Vue 快速入门]从零开始搭建 VUE + Element UI后台管理系统框架前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条 ...
基于vue(element ui) + ssm + shiro 的权限框架
zhcc 基于vue(element ui) + ssm + shiro 的权限框架引言心声现在的Java世界,各种资源很丰富,不得不说,从分布式,服务化,orm,再到前端控制,权限等等玲琅满目 ...

Vue+element 实现英雄榜功能

一、英雄榜实现

1、引入element Lib 和VUE

2、设置滚动条动态显示

1）设置对应的VUE参数名：scrollHiddenVar

2）VUE data定义

3）mounted 设置鼠标监听事件

4）监听方法

3、设置element Table

4、table 数组

5、VUE 核心代码

6、DEMO下载

Vue+element 实现英雄榜功能相关推荐

最新文章

热门文章