需求:在父節點(一級)展示【下載】按鈕,子節點【二級】展示【查看】按鈕
<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>