Li Jianwei's Blog

<div id="toast" style="position: fixed; z-index: 999; top: 10%; background: ; text-align: center; width: 100%; display:none;">
 <span id="toast_content" style="border-radius: 32px;background:rgba(0,0,0,.7);opacity: 0.9;padding: 8px 16px;font-size: 14px;color:#fff;"></span>
 </div>
 <script type="text/javascript">
 /* 消息提醒 */
 var area = ['北京', '广州', '郑州', '武汉', '珠海', '长沙', '淄博', '东莞', '昆山', '无锡', '阳江', '钦州', '天津', '厦门', '深圳', '株洲', '达州', '成都', '重庆', '北海', '福州', '梧州', '青海'];
 var person = ['赵先生', '吴先生', '高先生', '郑先生', '刘先生', '王先生', '刘先生', '李先生', '罗先生', '罗先生', '黄先生', '孙先生', '朱先生', '何先生', '朱先生', '白先生', '陈先生', '邓先生', '叶先生'];
 function showToast() {
 var areaIndex = Math.round(Math.random() * (area.length - 1));
 var personIndex = Math.round(Math.random() * (person.length - 1));
 $("#toast_content").text("来自" + area[areaIndex] + "的" + person[personIndex] + "购买了该产品");
 $("#toast").fadeIn();
 setTimeout("dismissToast()", 1500);
 }
 
 function dismissToast() {
 $("#toast").fadeOut();
 setTimeout("showToast()", 1500 + Math.round(Math.random() * 10000));
 }
 dismissToast();
</script>

直接上代码示例

//html部分
<div data-v-a99540b0 class="time" >
 <span data-v-a99540b0></span><span data-v-a99540b0></span><span data-v-a99540b0></span>
</div>
//js部分
<script>
 let countDown = +'83017';
 let _int = setInterval(function(){
 let hours = Math.floor(countDown/60/60),
 minute = Math.floor((countDown - hours*3600)/60),
 second = countDown - (hours*3600 + minute*60),
 day = 0;
 _hours = ('00'+hours).slice(-2);
 _minute = ('00'+minute).slice(-2);
 _second = ('00'+second).slice(-2);
 let _cel = `<span data-v-a99540b0>${_hours}</span><span data-v-a99540b0>${_minute}</span><span data-v-a99540b0>${_second}</span>`;
 if(hours > 72){
 day = Math.floor(hours/24);
 hours = hours%24;
 _day = ('00'+day).slice(-2);
 _cel = `<span data-v-a99540b0>${_hours}</span><span data-v-a99540b0>${_minute}</span><span data-v-a99540b0>${_second}</span>`;;
 }
 if(day > 30){
 clearInterval(_int);return false;
 }
 $('.time').html(_cel);
 countDown--;
 },1000);
 </script>

当用el-table做自定义列的时候,需要用v-if来控制列的隐藏和显示,这个时候有时候会发现一个bug,有时候刷新表格内容会错乱

解决办法:

就是给每列加一个唯一的key，就可以防止错乱

<el-table-column :key="Math.random()" v-if=""></el-table-column>