1. Table 1
(1) Functional requirements: Click any position of a table row to expand the secondary table of that row, and fold up other rows to expand. (2) Implementation method:
//template <el-table :data="tableData" @row-click="getRowClick" row-key="no" :expand-row-keys="expands" > <el-table-column prop=" No "label=" Number" width="65" bb0 </el-table-column prop=" RecordId" ></el-table-column type="expand"> </el-table-column type="expand"> // <template slot-scope="scope"> <div Class ="childrenClass"> <el-table :data="scope.row. ProductDetails "> <el-table-column prop="name" label=" childrenClass"> <el-table :data="scope.row. ProductDetails "> <el-table-column prop="name" label=" </el-table-column> </el-table> </div> </template> </el-table-column> </el-table> //script expands: []; / / no need to expand line attributes, and assign a value to the array of row method getRowClick (row: any) {if (this. Expands. IndexOf (row. No) < 0) {enclosing expands = []; this.expands.push(row.no); } else { this.expands = []; }}@row-click: This event is triggered when a row is clicked; 10. row-key: The key of the row data used to optimize the Table rendering. This project uses the no attribute in TableData as the key. Expand-row-keys: This property allows you to set the current expanded rows of the Table. You need to set the row-key property, which is the keys array for the expanded rows. The effect of bold (4) :
