Recently, the table function has been used frequently in the project, because the UI framework uses Element UI again. Therefore, the tips for using el-Table under Element are summarized below.

1. Line background color

The table component provides the row-style property, which states that the style of a row can be called back. You can also use a fixed Object to set the same style for all rows.

So we can write a setRowStyle method in method that uses the row index and the background color array to match the color value for the cell background color.

setRowStyle({row, rowIndex}) {
      return {
        'background-color': this.rowsBgColor[rowIndex]
      }
 }
Copy the code

For trigger Settings, we can add a drop-down menu button named “Action” in the last bar, add a row background color menu in the menu, move the mouse up, and introduce a color-picker component for color selection in the el-Popover component appearing on the left.

2. Merge cells

Table spAN-method (row, column, rowIndex, columnIndex);

:span-method="objectSpanMethod"
Copy the code

We then implement the objectSpanMethod method. Note that afterSpanArray is an object containing the first and second column Prop values as property values, and that the values corresponding to these two properties are arrays of merged row values, respectively.

objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0 || columnIndex === 1) {
        const _rowspan = this.afterSpanArray[column.property][rowIndex]
        const _colspan = _rowspan > 0 ? 1 : 0
        return {
          rowspan: _rowspan,
          colspan: _colspan
        }
      }
 }
Copy the code

3. Table statistics

The Table component provides the show-summary attribute, which specifies whether to display a total row at the end of the Table. The value is Boolean. If set to true, the bottom of the Table is a row that adds “total”, which only counts columns whose cell values are numbers.

In addition, there is a summary-method property, which describes the custom summing method and the columns and data parameters of the callback function.

:summary-method="getSummaries"
Copy the code

So we encapsulate a statistical method here that satisfies our rules, and if the cell already contains a statistical line for the product line, then the total manpower count is subtracted from it.

getSummaries(param) {
      const { columns } = param
      const sums = []
      const weekSum = {}
      this.deptManpowerSum.forEach((deptManpower, index) = > {
        let key = 'col' + deptManpower.week.replace(/-/g.' ')
        weekSum[key] = deptManpower.weeklyTotal
      })
      columns.forEach((column, index) = > {
        if (index === 0) {
          sums[index] = 'Total Department Manpower'
          return
        }
        if (weekSum.hasOwnProperty(column.property)) {
          sums[index] = weekSum[column.property]
        } else {
          sums[index] = ' '}})return sums
 }
Copy the code

4. Line

When the table display data is limited and you do not want to set the details page display separately, you can use the row expansion items to display in text format.

Row-key and expander-row-keys are used to set the current expanded row of the Table to the keys array of the expanded row.

:row-key="(row) => {return row.id}"
:expand-row-keys="expandRows"
Copy the code

To expand the contents of the row, add the el-table-column label with the type attribute of expand

<el-table-column type="expand">
    <template v-slot="{row}"></template>
</el-table-column>
Copy the code

So the default trigger expansion is clicking the right arrow in the cell. Yes what if we want to click anywhere in the row to expand? The table component provides a row-click method

@row-click="clickRowHandle"</pre>
Copy the code

The argument to its callback is row data, where we maintain an array that stores the ids of the currently expanded row.

clickRowHandle(row) {
  if (this.expandRows.includes(row.id)) {
    this.expandRows = this.expandRows.filter(val= >val ! == row.id) }else {
    this.expandRows.push(row.id)
  }
}
Copy the code

Note: There is a catch here, when you click the right arrow to expand and the row out of place to expand, two different events, resulting in the stored values of this array and the events are inconsistent. So if you click to expand from a row, that row’s ID is stored in the array, but if you click on the right arrow to collapse, that ID is not removed from the array, and the next time you click on another row, that row is automatically expanded.

There is a way to compensate for this trap, as we can see from the documentation that the Table provides another expander-change method that listens for the row expand collapse event, so that no matter where you click on the row expand, you will know.

@expand-change="rowExpandChange"
Copy the code

This function has two callback arguments, row and expandedRows

rowExpandChange(row, expandedRows) {
  this.clickRowHandle(row)
}
Copy the code

So we can execute the click event more than once in this method.

These are some of the common approaches I’ve drawn from my projects. The Table component provides a wealth of properties and methods, and you can use it together to achieve even more useful functionality.