随笔 - 315  文章 - 1  评论 - 12  阅读 - 24万

element-ui树状table子节点和父节点区别开展示不同操作按钮

需求:在父节点(一级)展示【下载】按钮,子节点【二级】展示【查看】按钮

 

复制代码
  <el-table
                    :data="tableData"
                    style="width: 100%"
                    border
                    lazy
                    row-key="id"
                    :fit-columns="['name', 'lh_version']"
                    default-expand-all
            // child: 这是后台获取的数据中的子节点的名称! :tree
-props="{children: 'child', hasChildren: 'hasChildren'}" @selection-change="changeCheckBoxValue" max-height="550"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column v-for="(option, index) in options" :label="option.label" :prop="option.name" :key="index" :width="option.width" :align="option.align" ></el-table-column> <el-table-column fixed="right" align="center" label="操作" width="360"> <template slot-scope="scope"> <div v-if="!scope.row.resource_id"> <el-button type="primary" plain icon="el-icon-download" @click.native.prevent="downloadRow(scope.$index, tableData)" type="text" size="small"> 下载 </el-button> <el-button v-if="!scope.row.resource_id" type="success" plain icon="el-icon-printer" @click.native.prevent="preview(scope.row)" type="text" size="small"> 预览 </el-button> </div> <div v-else> <el-button type="success" plain icon="el-icon-printer" @click.native.prevent="drawView(scope.row.props)" type="text" size="small"> 查看Json-props </el-button> <el-button type="success" plain icon="el-icon-printer"
                      // scope.row:当前行,不能使用下标去取需要的值,当使用树状表格时,父节点和子节点下标连接起来了,用下标取值是不对的,只能用当前行
@click.native.prevent="drawView(scope.row.components)" type="text" size="small"> 查看Json-components </el-button> </div> </template> </el-table-column> </el-table>
复制代码

 

posted on   小虾米吖~  阅读(3796)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」

点击右上角即可分享
微信分享提示