Antecedents feed

In ordinary projects, the table of elemengUI is a frequently used point, which can be displayed gracefully by binding an array and binding an attribute to each column name.

Disadvantages parsing

Tables are very useful, but they have the disadvantage that if you don’t set the column width, all columns will split the table width equally. However, because the content width of each column is not consistent, for example, some columns are URLS and some columns are phones, the table row height will become very high if left unprocessed. So my product told me that I needed to set the height and spread the content horizontally. After looking through the documentation, I couldn’t find a solution, so I chose to write my own function.

Function in

The first thing to understand is that we can set width for each column to control the column width. Now let’s do some statistics to get a few values for the column width.

  1. We can get the table width directlytablewidth.
  2. It is more difficult for the content to spread this problem. At the beginning, I thought of statistical characters and then conversion, but I think it is not very accurate. Later you decide what to setwhite-space:no-wrapControl no line breaks, setdispalyforinline-block. The width of the content area is the width of the actual content spread out.
  3. Each cell in each column varies in size, and the largest should be selected as the base for the width of the column.

This forms the basic logic, and the function will look like this.

adjustColumnWidth () {
  var maxArr = []
  const colgroup = document.querySelector('.el-table colgroup')
  const colDefs = [...colgroup.querySelectorAll('col')] // Get which columns are available
  colDefs.forEach((col, index) = > {
    const clsName = col.getAttribute('name') // Get the column name
    const cells = [
      ...document.querySelectorAll(`td.${clsName}`) // Get all cells of the column, excluding the table header
    ]
    const widthList = cells.map((el) = > {
      return el.querySelector('.cell')? el.querySelector('.cell').scrollWidth : 0 // Get all cell widths for the column
    })
    const max = Math.max(... widthList)// Get the maximum cell width of the column
    const padding = 32
    maxArr.push((max + padding > 80)? (max + padding) :80) // If the cell is empty, reserve the space so that the column name can be displayed normally.})}Copy the code

The table does not complete spread-out when all column widths add up to less than the maximum table width the page can hold. This is because we did not allocate the remaining widths.

adjustColumnWidth (table) {
  var maxArr = []
  var tableWidth = document.querySelector('.panel-other .el-tabs').scrollWidth // The maximum table width that a page can hold
  const colgroup = table.querySelector('colgroup') 
  const colDefs = [...colgroup.querySelectorAll('col')] // Get which columns are available
  colDefs.forEach((col, index) = > {
    const clsName = col.getAttribute('name') // Get the column name
    const cells = [
      ...document.querySelectorAll(`td.${clsName}`) // Get all cells of the column, excluding the table header
    ]
    const widthList = cells.map((el) = > {
      return el.querySelector('.cell')? el.querySelector('.cell').scrollWidth : 0 // Get all cell widths for the column
    })
    const max = Math.max(... widthList)// Get the maximum cell width of the column
    const padding = 32
    maxArr.push((max + padding > 80)? (max + padding) :80) // If the cell is empty, reserve the space so that the column name can be displayed normally.
  })
  maxArr.splice(maxArr.length - 2.2)
  var totalWidth = maxArr.reduce(function (prev, curr, idx, arr) {
    return prev + curr
  }) 
  if (tableWidth > totalWidth) {
    var width = (tableWidth - totalWidth - 100) / maxArr.length // Divide the remaining width evenly
    maxArr = maxArr.map((item, index) = > item + width)
  }
}
Copy the code

All that remains is to assign the maxArr function to each column of the table property width. Smooth end!