需求:在父节点(一级)展示【下载】按钮,子节点【二级】展示【查看】按钮
<el-table
:data="tableData"
style=" 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>