多级table表格展开箭头根据有无数据进行显示与隐藏

效果如下：

 

 

 缩减版代码如下：

 1 <el-table :data="WorkProcessList" :row-class-name="expandVisible" >
 2         <el-table-column type="expand">
 3             <template slot-scope="scope">
 4                 <!-- 二级列表 - 工步 -->
 5                 <el-table :data="scope.row.WorkStep" :row-class-name="expandVisibleTwo" :empty-text="$t('ProcessManagement.StandardFormula.Ctl.NoRecord')"  v-loading="loadingT" :show-header='false'>
 6                     <!-- 三级列表 -->
 7                     <el-table-column type="index" align="center">
11                     </el-table-column>
12                     <el-table-column type="expand">
13                         <!-- 物料列表 展示 -->
14                         <!-- 手工投料 -->
15                         <template slot-scope="scope">
16                             <el-table :data="scope.row.ManualFeedingStep" highlight-current-row class="el-tb-edit" ref="demoTable"
17                                 :empty-text="$t('ProcessManagement.StandardFormula.Ctl.NoRecord')" v-loading="loadingT"
18                                 v-show="WorkStepForm.WorkStepType == 'ManualFeeding'" :show-header='false'>
19                                 
20                                 <!-- 存货编码 -->
21                                 <el-table-column :render-header="common.labelHead" prop="InventoryCode" label="存货编码" width="150">
22                                 </el-table-column>
23                                 <!-- 存货名称 -->
24                                 <el-table-column :render-header="(h, obj) => common.labelHead(h, obj, scope.row.ManualFeedingStep)" prop="InventoryName" label="存货名称">
25 
26                             </el-table>
27                         </template>
28                     </el-table-column>
29                     <!-- 步骤号 -->
30                     <el-table-column prop="WorkStepSN" align="center" width="100px" label="步骤号">
31                     </el-table-column>
32                     <!-- 工步名称 -->
33                 </el-table>
34             </template>
35         </el-table-column>
36         <el-table-column prop="WorkProcessName" label="工艺过程" align="center"></el-table-column>
37 
38     </el-table>
 1 //table多级--一级箭头是否隐藏
 2         expandVisible(row, rowIndex) {
 3             let data = row.row
 4             let res = []
 5             if (data.WorkStep && data.WorkStep.length > 0) {
 6                 res.push('row-expand-has')
 7                 return res
 8             } else {
 9                 res.push('row-expand-unhas')
10                 return res
11             }
12         },
13         //table多级--二级箭头是否隐藏
14         expandVisibleTwo(row, rowIndex) {
15             let data = row.row
16             let res = []
17             if (data.ManualFeedingStep && data.ManualFeedingStep.length > 0) {
18                 res.push('row-expand-has')
19                 return res
20             } else {
21                 res.push('row-expand-unhas')
22                 return res
23             }
24         },

 

posted on 2021-07-07 14:44  奔驰的码儿  阅读(820)  评论(0)    收藏  举报

导航