element-ui el-table中根据按钮的多少来计算操作栏的宽度

columnWidth.js

export default {
  data() {
    return {
      minWidth: 100
    }
  },
  watch: {
    minWidth() {
      this.setWidth()
    }
  },
  methods: {
    setWidth() {
      if (this.headerData) {
        this.$set(this.headerData[this.headerData.length - 1], 'width', this.minWidth)
      }
    },
    // 获取列表数据后，调用此方法
    getTextWidth(ref) {
      const trArr = []
      const operateTd = []
      const buttonNumArr = []
      let isContainMore = false // 是否含有'更多'按钮，因为‘更多’后面有个尖括号
      this.$nextTick(() => {
        // 获取当前table的所有tr
        let tr = []
        if (ref && this.$refs[ref]) {
          tr = this.$refs[ref].$el.querySelectorAll('tbody tr')
        } else {
          tr = document.querySelectorAll('tbody tr')
        }
        // console.log(tr)
        if (tr.length) {
          tr.forEach((item, index) => {
            const t = trArr.find(t => t.rowIndex === item.rowIndex)
            if (!t) trArr.push(item)
          })
        }
        // 获取每一行tr中操作栏的按钮数量（操作栏在最后一列）
        trArr.forEach(item => {
          const span = document.createElement('span')
          span.classList.add('getColumnWidth')
          const td = item.querySelector('td:last-child .cell')
          const allSpan = td.querySelectorAll('span')
          const textArr = []// 存放每一行的按钮文字
          // console.log(btns.length)
          allSpan.forEach(b => {
            if (b.innerHTML) {
              const str = b.innerHTML + ''
              const text = str.replace(/<[^>]+>/g, '')
              if (text.indexOf('更多') !== -1) {
                isContainMore = true
              }
              if (textArr.indexOf(text) === -1) {
                textArr.push(text)
              }
            }
          })
          buttonNumArr.push(textArr.length)
          // const cloneTd = btns.cloneNode(true)
          if (td) {
            span.innerHTML = textArr.join(',')

            // span.appendChild(cloneTd)
            document.body.appendChild(span)
            operateTd.push(span.offsetWidth)

            document.querySelector('.getColumnWidth').remove()
          }
        })
        // 获取长度最大的操作栏
        const width = Math.max(...operateTd)
        // 获取按钮数量最多的操作栏
        const buttonNum = Math.max(...buttonNumArr)

        // 计算宽度
        if (buttonNumArr.length < 1) {
          this.minWidth = 80
        } else {
          let extra = 40
          if (isContainMore) {
            extra = 40 + 10
          }
          this.minWidth = width + (buttonNum - 1) * 10 + extra
        }
      })
    }
  }
}