el-table total style modification, add pictures

     The table here uses the el-table component. As shown above, add pictures to the two total fields at the bottom. The summation is done using:summary-method="getSummaries". The principle of adding pictures is actually to obtain the positioning of the DOM element of this cell, then add the img element to this element, and set the style. As shown below, open the developer mode of the browser. For example, in my example, I want to get the cell of "payment amount year-on-year".

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

 

Guess you like

Origin blog.csdn.net/qq_33278354/article/details/131574936