According to the demand, for page display, consider a table display mode, the existence of style processing

<el-table v-loading=" errorLoading "ref="errorDetail" :data="errorData" border ="width: 100%; Word-wrap: break-word! Important; "> <el-table-column type="expand" width="1"> <template slot-scope="scope"> <el-form inline Class ="demo-table-expand"> <el-form-item label=" "> < span > {{scope. Row. ClientTimestamp}} < / span > < / el - form - item > < el - form - the item label =" task ID: "> <span>{{scope.row.taskId}}</span> </el-form-item> <el-form-item label=" "> <span>{{ scope.row.courseName }}</span> </el-form-item> </el-form> </template> </el-table-column> <el-table-column </el-table-column> <el-table-column prop="taskId" label=" taskId" show-overflow-tooltip></el-table-column> <el-table-column prop="courseName" align="center" </el-table-column> <el-table-column label=" operation ">< template slot-scope="scope"> <el-button type="text" @click="toogleExpand(scope.row, scope.$index)"> </ el-frame > </template> </el-table-column> </el-table>Copy the code
$table = this.$refs.errorDetail; this.errorData.map((item, index) => { if(key ! = index) { $table.toggleRowExpansion(item, false) } }) $table.toggleRowExpansion(row) }Copy the code
3, CSS style section /deep/. El-table__expansion-icon {display: none; } // hide the arrowCopy the code