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

  • Post author:
  • Post category:vue


本项目由于合计汇总数字太多太长,又不能改变原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;
    })
  }
<style lang="scss" scoped>
 ::v-deep .el-table__footer-wrapper {
   .el-table__footer {
     td.el-table__cell{
       div{
          white-space: nowrap;
          // 其他自定义样式
        }
     }
   }
 }
</style>



版权声明:本文为qq_42220283原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。