.button2 {
width: 77px;
height: 26px;
background: #2792c0;
opacity: 1;
border-radius: 4px;
border: none;
margin-right: 3px;
color: white;
cursor: pointer;
.btn {
width: 77px;
height: 26px;
background: rgb(160, 207, 255);
opacity: 1;
border-radius: 4px;
border: none;
margin-right: 3px;
color: white;
data(){
return{
sending: [{ isShow: false, leftSecond: 0 }],
second: 10,
mounted(){
xxx(){
if (this.tableData.length > 0) {
this.sending = [];
this.tableData.forEach(() => {
this.sending.push({ isShow: false, leftSecond: 0 });
});
console.log("sending数组:", this.sending);
call(scope,row){
if (this.sending[scope.$index].isShow) return;
this.sending[scope.$index].isShow = true;
this.timeDown(scope.$index);
timeDown(index) {
console.log("倒计时");
this.sending[index].leftSecond = this.second;
const timmer = setInterval(() => {
this.sending[index].leftSecond--;
if (this.sending[index].leftSecond <= 0) {
clearInterval(timmer);
this.sending[index].leftSecond = 0;
this.sending[index].isShow = false;
}, 1000);
类似于获取验证码,点击后有倒计时,在这基础上进行修改,思路:页面初始渲染列表时,循环遍历列表,生成一个跟列表长度吻合的对象数组,每个对象所有两个属性,isShow: false(是否点击) leftSecond: 0(剩余时间)...
HTML 部分:
<tr class="height320" style="border-top: 1px">
<td class="tdBg jianli_td lh18 textAlign">
<br>简<br>历
<td colspan="6">
<el-table-column prop="manage" label="管理">
<template slot-scope="scope">
<el-button size="mini" type="warning" @click="handleEdit(scope.row)">修改</el-button>