vue中按钮动态循环渲染的时候 第一次layui文件上传可以使用 之后按钮失效
解决办法:移除对象 重新加入 使layui重新去绑定它
//shareholderfront 代表按钮本身
$(`#shareholderfront${gudongNum}`).remove()
//uploadBox1 代表按钮的父元素
$(`#uploadBox1${gudongNum}`).html(`<button class="layui-btn" id="shareholderfront${gudongNum}" >
<i class="layui-icon"></i>上传身份证人像面\n
</button>`)
完整代码:
uploadFile1(gudongNum) {
var that = this;
layui.use(['upload', 'element'], function () {
var upload = layui.upload;
var element = layui.element;
$(`#shareholderfront${gudongNum}`).remove()
$(`#uploadBox1${gudongNum}`).html(`<button class="layui-btn" id="shareholderfront${gudongNum}" >
<i class="layui-icon"></i>上传身份证人像面\n
</button>`)
setTimeout(()=>{
//执行实例
var uploadInst = upload.render({
elem: '#shareholderfront' + gudongNum //绑定元素
, url: base_url + 'staff/fileupload' //上传接口
, headers: {stafftoken: $.cookie("stafftoken")}
, data: {
pid: function () {
return $("#gudong_front_ID" + gudongNum).attr("pid")
},
sort: 1,
}
, progress: function (n, elem) {
if(gudongNum ==1){
that.speed_1=true;
}else{
$("#positive" + gudongNum).css("display",'block');
$("#neibu_1" + gudongNum).html('<span class="layui-progress-text">'+that.percent_1+'</span>');
}
//上传进度回调
that.percent_1 = n + '%'; //获取进度百分比
element.progress("shareholderUploadfile_1"+(gudongNum), that.percent_1); //将进度赋值给lay-filter="uploadfile"的进度条
}
, done: function (res) {
if (res.code === 0) {
that.shareholderLoading = true;
$("#gudong_front_ID" + gudongNum).attr("src", res.data.uploafile.fileUrl);
layui.layer.msg('上传成功');
that.gudongList.forEach((item,index) =>{
if(gudongNum == (index + 1)){
item.shareholderpic1 = res.data.uploafile;
item.pid1 = res.data.uploafile.id
item.img1 = res.data.uploafile.fileUrl
}
})
} else {
layui.layer.msg(res.msg);
}
}
, error: function (res) {
layui.layer.msg(res.msg);
}
});
},500)
});
},
html部分:
<div class="layui-upload layui-col-md2 layui-col-lg2">
<div class=" layui-col-md12 layui-col-lg12 flex-box margin10 width300" v-loading="shareholderLoading_1">
<div class="placeholder shengfen_after">
<img :id="step((index+ 1),'gudong_front_ID')" :pid="item.pid1" :src="item.img1" class="shengfen_front layui-upload-img card_front" :id="step((index + 1),'gudong_front_ID')" />
</div>
</div>
<div class="layui-col-md12 layui-col-lg12 speedProgress">
<div :id="step((index+1),'positive')" v-show="speed_1" class="layui-progress progresssy" lay-showpercent="true" :lay-filter="step((index+1),'shareholderUploadfile_1')">
<div :id="step((index+1),'neibu_1')" class="layui-progress-bar layui-bg-green" lay-percent="0%"></div>
</div>
</div>
<div class="layui-col-md12 layui-col-lg12 flex-box margin10 width300" :id="step((index + 1),'uploadBox1')">
<button class="layui-btn" :id="step((index + 1),'shareholderfront')" >
<i class="layui-icon"></i>上传身份证人像面
</button>
</div>
</div>