表格-序号 折叠

效果图：

代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

<el-table       :data="tableData"       style="width: 100%"       v-loading="tableDataLoading"       :header-cell-style="{ background: '#FAFAFA' }"       :tree-props="{ children: 'recordList' }"       row-key="id"    >       <el-table-column label="序号" width="90" prop="parentIndex">         <template slot-scope="scope">           <div v-if="scope.row.recordCount > 1" style="position:relative">             <span class="serial_number"> {{ scope.row.parentIndex }}</span>             <span class="serial_number_cell">{{               "(" + scope.row.recordCount + ")"             }}</span>           </div>           <div v-else>{{ scope.row.parentIndex }}</div>         </template>       </el-table-column> </el-table>   methods:{      // 在请求接口的函数里      函数名:{         // tableData 表格接收的数组名         let num = 1;         this.tableData.forEach((item, index) => {           item.id = num++;<br>　　　　　　item.expanded = false // 更新           item.parentIndex = (this.pageNum - 1) * this.pageSize + index + 1;           if (item.recordList && item.recordList.length > 0) {             item.recordList.forEach(e => {               e.id = num++;             });           }         });      },}   <style lang="scss" scoped> // 表格-序号 ::v-deep.el-table .cell {   display: flex; } // 折叠-箭头 ::v-deep.el-table [class*="el-table__row--level"] .el-table__expand-icon {   margin-left: 50px;   color: #8c8c8c; } .serial_number {   position: absolute;   margin-left: -70px;   margin-right: 10px; } .serial_number_cell {   position: absolute;   margin-left: -35px;   color: #8c8c8c; } </style>

　　　　@row-click="expandChange"  // 更新

　　expandChange(row, expanded) { // 更新---只展示一行其他同级的收起

      　　this.tableData.forEach(e => {

        　　if (row.id === e.id) {

          　　e.expanded = !e.expanded;

        　　} else {

          　　e.expanded = false;

        　　}

        　　this.$refs.topicTable.toggleRowExpansion(e, e.expanded);

      　　});

    　　},