html:
<tab-pane :label="lab1" name="name0"> <div class="t1"> <i-table :columns="columns3":data="data3"> </i-table> <page class="page2" show-elevator :total="count1" :current="current_num1" placement="top" @on-change="numChange1" show-sizer :page-size="pageSize1" @on-page-size-change="pageSizeChange1"></page> </div> <div class="c1" id="c0"> </div> </tab-pane>想要在 class="c1"的div层里面动态添加图片和详细信息,有多少条数据就添加多少个;
js:
// 动态创建 dynamicCreated: function(val) { var div = document.getElementById(this.yy); div.innerHTML=""; if (val.length != 0) { // 获取div for (let i = 0; i < val.length; i++) { var img = document.createElement("img"); var div1=document.createElement("div"); img.src = "http://XXXX" + val[i].emp_no + "XXXXX"; img.style.marginLeft = "10px"; img.style.height = "130px"; img.style.width = "100px"; let no = val[i].emp_no; let name = val[i].emp_name; var p=document.createElement("p"); var p1=document.createElement("p"); p.width="130px"; p1.width="130px"; p.slot="title"; p1.slot="title"; p.innerHTML="工號:"+no; p1.innerHTML="姓名:"+name; p.style.textAlign="center"; p1.style.textAlign="center"; div1.style.width="130px"; div1.appendChild(img); div1.appendChild(p); div1.appendChild(p1); div1.style.display="inline-block"; div.appendChild(div1); } } else { var text = document.createElement("text"); text.innerHTML = "<strong>暫無數據</strong"; text.style.fontSize="14px"; div.appendChild(text); } },运行结果图: