table.js

import { Table } from 'element-ui'
import { getTextWith } from './utils'

export default {
  name: 'ElTable',
  extends: Table,
  props: {
    // Set auto-fit column's width
    autoFitColumn: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    data() {
      // 每一行数据
      this.$nextTick(() => this.setAutoFitColumn())
    },
    columns() {
      // 每一列
      this.$nextTick(() => this.setAutoFitColumn())
    },
    // 只适配某些字段列
    fitColumns() {
      this.$nextTick(() => this.setAutoFitColumn())
    }
  },
  methods: {
    // support max-width
    initColsObj() {
      this.colObjs = this.$children.reduce((prev, cur) => {
        if (cur.prop) {
          prev[cur.prop] = cur.maxWidth || cur.$attrs['max-width'] || 0
        }
        return prev
      }, {})
    },
    /* 根据每一项field进行分组，形成field: [....],这样就拿到了每一页的，根据键名，键值为所有数据的宽度的最大值的集合*/
    flattenData(data) {
      if (!Array.isArray(data)) return {}
      return data.reduce((acc, cur) => {
        for (const item in cur) {
          if (!acc[item]) acc[item] = []
          acc[item].push(getTextWith(cur[item]))
          acc[item] = [Math.max(...acc[item])]
        }
        return acc
      }, {})
    },
    setAutoFitColumn() {
      // It's false, Use original el-table
      if (!this.autoFitColumn) return
      if (!this.data) return

      const collectionData = this.flattenData(this.data)
      // console.log('cc---',collectionData)
      this.initColsObj()
      this.handlerAutoFitColumn(collectionData)
    },
    handlerAutoFitColumn(data) {
      const columns = this.layout.getFlattenColumns()

      // Each column's settings
      this.columns.forEach((col, idx) => {
        const curColumn = columns.find(item => item.id === col.id)

        // It's not exist in fit-columns array
        if (this.fitColumns && this.fitColumns.length && !this.fitColumns.includes(curColumn.property)) return

        // 获取设定的最大宽度
        const maxWidth = this.colObjs[curColumn.property] || 0

        // th header Width
        const thColWidth = getTextWith(col.label) + 30
        // console.log(122,col.label)
        // td width
        const tdColWidth = data[curColumn.property] ? data[curColumn.property][0] + 50 : 0

        // adjust minimum width of every columns
        let minWidth = Math.ceil(
          Math.max(
            col.sortable ? thColWidth + 17 : thColWidth,
            tdColWidth,
          )
        )
        // console.log('min',minWidth)

        // 宽度超过200，表示字数超过20个，显示提示
        if (minWidth > 200) { minWidth = 230 }
        curColumn.minWidth = maxWidth ? Math.min(maxWidth, minWidth) : minWidth + 20
      })

      // run once layout api
      this.doLayout()
      this.$emit('doLayout')
    }
  }
}