Using VUE development project, the ui framework used is element ui. When writing the table expansion line, after getting the data, add the data to the table data bound to the table. I add a new attribute tableDtailData to each item in the tableData to store the expansion line data (api.getInData() is the method to send the request to the encapsulated axios)

api.getInData(param).then((data) => {
        if (data.message === 'SUCCESS') {
          this.pageInfo = data.data;
          this.tableData = data.data.list;
          if (this.tableData.length !== 0) {
            for (let i = 0; i <= this.tableData.length; i += 1) {
              if (this.tableData[i]) {
                Object.keys(this.initFormData.billMapIn).sort().forEach((key) => {
                  if (this.tableData[i].billStatusIn === this.initFormData.billMapIn[key].code) {
                    this.tableData[i].billStatusIn = this.initFormData.billMapIn[key].name;
                    this.tableData[i].tableDetailData = [];
 }});} } }} });

// Expand table information
    expandDetail(expandedRows) {
      api.getTableDetailList(expandedRows.idAllot).then((data) => {
        expandedRows.tableDetailData = data.data;
      });
    },

This did not succeed. The first time you click to expand the line, the data display is empty, and the data will be displayed again when you click the second time. But when you click the first time, the data has been modified successfully, but it does not respond to the template display. Continue to change the version:

api.getInData(param).then((data) => {
        if (data.message === 'SUCCESS') {
          data.data.list.forEach((item) => {
            item.tableDetailData = [];
          });
          this.pageInfo = data.data;
          this.tableData = data.data.list;
          if (this.tableData.length !== 0) {
            for (let i = 0; i <= this.tableData.length; i += 1) {
              if (this.tableData[i]) {
                Object.keys(this.initFormData.billMapIn).sort().forEach((key) => {
                  if (this.tableData[i].billStatusIn === this.initFormData.billMapIn[key].code) {
                    this.tableData[i].billStatusIn = this.initFormData.billMapIn[key].name;
} });  } }} } });

In this way, it will be successful after that. Click the display line to display the corresponding data;

The problem of data response is involved here. The data of data.data is obtained, assigned twice and modified once;

The reason for this change is that the colleague said that the acquired data has been assigned twice, and the data must be modified before the two assignments. Otherwise, after the data.data is assigned, if the assigned tableData is modified, the data will not be submitted to VUE and become responsive data immediately.