el-table合计样式修改,增加图片

el-table合计样式修改,增加图片_第1张图片

     这里的表格用的是el-table组件。如上图,在底部合计的两个字段上增加图片。合计用的是:summary-method="getSummaries"。增加图片的原理其实就是获取这个单元格的dom元素定位,然后在这个元素里面增加 img元素,还可以设置样式。如下图,打开浏览器的开发者模式。例如我的实例中要得到“缴费金额同比”的单元格。

el-table合计样式修改,增加图片_第2张图片

 //multipleTable el-table的id
 if (that.$el.querySelector("#multipleTable") ) {
          let current = that.$el
            .querySelector("#multipleTable")
            .querySelector(".el-table__footer-wrapper")
            .querySelector(".el-table__footer")
            .querySelector(".has-gutter")
            .querySelector("tr td:nth-child(7)")
            ;
          //  console.log(current)

          let closeImg = document.createElement("img");
          closeImg.id = 'img1';
          closeImg.style.float = 'left';
          closeImg.src = '图片base64'
          closeImg.width = "30";
          closeImg.height = "30";
          current.appendChild(closeImg);

        }

 

你可能感兴趣的:(elementui)