vue+Element 实现表格嵌套

 

 

 

 <el-table v-loading="loading" :data="historyList" @selection-change="handleSelectionChange"
:row-key="getRowKeys"
:expand-row-keys="expands"
@expand-change="handledetail" >
<el-table-column type="expand" >
<template slot-scope="props">
<el-table v-loading="loading"
:data="infoList"
:row-style="{background:'rgb(48,133,154)',color:'#bbcafb',opacity:1,}"
:header-cell-style="{opacity:1,background:'rgb(48,133,154)',color:'#bbcafb'}"
@selection-change="xthandleSelectionChange">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="标题" align="center" prop="detailsTitle" />
<el-table-column label="排序" align="center" prop="sort" />
<el-table-column label="展示位" align="center" prop="code" >
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_details_code" :value="scope.row.code"/>
</template>
</el-table-column>
<el-table-column label="类型" align="center" prop="detailsType">
<template slot-scope="scope">
<dict-tag :options="dict.type.sys_content_type" :value="scope.row.detailsType"/>
</template>
</el-table-column>
<el-table-column label="是否发布" align="center" prop="xqIsRelease" >
<template slot-scope="scope">
<el-switch
v-model="scope.row.xqIsRelease"
active-value="1"
inactive-value="0"
@change="xtswitchChange($event,scope.row)"
>
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="xthandleLook(scope.row)"
v-hasPermi="['system:info:query']"
>查看</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="xthandleUpdate(scope.row)"
v-hasPermi="['system:info:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="xthandleDelete(scope.row)"
v-hasPermi="['system:info:remove']"
>删除</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="xttotal>0"
:total="xttotal"
:page.sync="currentOpenRow.pageNum"
:limit.sync="currentOpenRow.pageSize"
@pagination="getxtList"
/>
</template>
</el-table-column>
<el-table-column label="名称" align="center" prop="historyName" />
<el-table-column label="排序" align="center" prop="historySort" />
<el-table-column label="标题图片" align="center" prop="filePath" >
<template slot-scope="scope">
<el-image
v-if="undefined!=scope.row.filePath && ''!=scope.row.filePath && null!=scope.row.filePath && 'null'!=scope.row.filePath"
style="width: 100px; height: 100px;cursor: pointer"
:src="returnImgPath(scope.row.filePath)">
</el-image>
<span v-else>未上传文件</span>

</template>
</el-table-column>
<!-- <el-table-column label="创建时间" align="center" prop="historyCreatetime" />-->
<!-- <el-table-column label="更新时间" align="center" prop="historyUpdatetime" />-->
<el-table-column label="是否发布" align="center" prop="isRelease" >
<template slot-scope="scope">
<el-switch
v-model="scope.row.isRelease"
active-value="1"
inactive-value="0"
@change="switchChange($event,scope.row)"
>
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
icon="el-icon-view"
@click="dshandleLook(scope.row)"
v-hasPermi="['system:history:show']"
>查看</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['system:history:edit']"
>修改</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['system:history:remove']"
>删除</el-button>
<el-button
size="mini"
type="text"
icon="el-icon-plus"
@click="addxt(scope.row)"
v-hasPermi="['system:info:add']"
>新建详情</el-button>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>

 

 

 

 

 

 




 

posted @ 2023-02-03 11:36  zhangzikang  阅读(1362)  评论(0编辑  收藏  举报