Vue+element implements dynamic tables (dynamically generated headers)

Scenario: Select the ship on the left, click OK, and the header will be dynamically generated on the right

This header can be the data given by the back-end, or it can be the data configured by the front-end after clicking on it. I use the front end to store the header data by itself. Part of the code is as follows:

{ { scope.row[scope.column.property] === ‘NaN’ ? ‘-’ : Number(scope.row[scope.column.property]).toFixed(2) + ‘km’ }}

tableColumnList: [] // Initialize dynamic header array

 // 配置表头
  let selHeader = this.$refs.tree.getCheckedNodes();
  let tableHeader = []; // 组合动态的表头
  selHeader.forEach(item => {
    let tabHeader = {};
    tabHeader.prop = item.code;
    tabHeader.propName = item.name;
    tableHeader.push(tabHeader);
  });
  this.tableColumnList = tableHeader;

Note: tableColumnList is the key factor to achieve dynamic!
There is a one-to-one correspondence between prop and the fields in the table, and propName is the Chinese name of each field, that is, the name displayed in the header.

There are two differences between the dynamic table and the general table of element in the usage method:

1. The assignment method
of label and property Dynamic table, the label and property of the table are dynamically based on the data returned in the background (or obtained from js), and the data returned in the background is the tableColumnList above.

Obtain the propName in the tableColumnList through :label=“item.propName”, that is, the name of each column in the table header;
through :property=“item.prop” obtain the prop of the object in the tableColumnList, that is, the property name in the background entity class,
2. Two-way binding of properties and data, that is, scope.row.

Obtain the data corresponding to each property through scope.row[scope.column.property]
. The property in scope.column.property takes the value in: property="item.prop";