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>
本文来自博客园,作者:小虾米吖~,转载请注明原文链接:https://www.cnblogs.com/LindaBlog/p/15791062.html
分类:
Vue
, element_ui
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」