The combined element-ui among rows and columns of the table assembly properties: span-method Usage

background

---

Recently basically to Vue to build the project, and UI framework also basically used element-ui, so there is more and more components used today I think the record is very, very small usage of a property.

Table Components

---

Table components used really too many times, there are also various attributes basically are used, it has to use a property today:span-method

The official description:

By passing a span-method table method may be implemented combined rows or columns, the method parameter is an object, which contains the current line row, column current column, current line number rowIndex, columnIndex four attributes of the current column number. This function may return an array containing two elements, the first element represents rowspan, the second element represents colspan. You can also return an object called rowspan and colspan keys.

Also gave example , interception code wherein:

objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
  if (columnIndex === 0) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
}

Here are consolidated with an example:

So look at this example, with documentation, said it slow connection, there are still some people do not understand (I fall into this category did not see to understand).

However, if you add a comment to a very short comment, it really is plain and simple.

if (rowIndex % 2 === 0) { // 用于设置合并开始的行号

The key point is to determine if this is only the beginning of merger need to find the line, without the need for us to find all lines merge together.

As long as the line began to find a merger, in which the return value, the number of rows returned merger, and with the last else, return return {rowspan: 0, colspan: 0}, we will be able to complete the merger row needs.

Look at a concrete example, add comments:

if (columnIndex === 0) {
    if (rowIndex === 0) {  // 合并第一行到第四行，从第一行开始，共4行
      return {
        rowspan: 4,
        colspan: 1
      }
    } else if (rowIndex === 4) { // 合并第五行到第九行，从第五行开始，共5行
      return {
        rowspan: 5,
        colspan: 1
      }
    } else if (rowIndex === 9) { //  合并第10行到第14行，从第10行开始，共5行
      return {
        rowspan: 5,
        colspan: 1
      }
    } else { // 其余被合并的行，诸如1、2、3、5、6、7、8、10、11、12、13全都设为0
      return {
        rowspan: 0,
        colspan: 0
      }
    }
}

Is not understand much. To put it plainly, this method if you want to determine which row is just the start of consolidation, and then returns the results to the combined number of rows, the number of columns .