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

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

 //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);

        }
<style lang="scss" scoped>
/deep/ .el-table__footer>.has-gutter>tr {
  td {
    .cell {
      display: inline-block;
    }

    flex-direction:row-reverse;
  }


}
</style>

猜你喜欢

转载自blog.csdn.net/qq_33278354/article/details/131574936
今日推荐