vue Element-ui el-table合计行样式自定义、不换行显示_element table合计列不折行

本项目由于合计汇总数字太多太长，又不能改变原width的情况下，就自定义样式超出点点点了，又要鼠标悬浮看全。js（设置‘title’） 配合 css（不换行）

  watch: {
  //loading 为v-loading
    loading(bool) {
      !bool && setTimeout(() => {
        const nodeList = this.footerTr || []
        nodeList.forEach(node => {
          if (node.children[0]) {
            if (Number(node.children[0].textContent)) {
              node.children[0].setAttribute('title', node.children[0].textContent)
            }
          }
        })
      }, 1000)
    }
  },
  updated() {
    this.$nextTick(() => {
      this.$refs.tableSummary && this.$refs.tableSummary.doLayout();
      if (this.footerTr) {
        return
      }
      this.footerTr = this.$refs.tableSummary.$el.querySelector('.el-table__footer-wrapper tr').children;
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<style lang="scss" scoped>
 ::v-deep .el-table__footer-wrapper {
   .el-table__footer {
     td.el-table__cell{
       div{
          white-space: nowrap;
          // 其他自定义样式
        }
     }
   }
 }
</style>
1
2
3
4
5
6
7
8
9
10
11
12