el-Collapse 折叠面板中嵌套 el-table
el-Collapse 折叠面板中嵌套 el-table
这个是el-collapse中嵌套el-table，并且可以在页面中实现无限滚动。
效果图：
一、实现步骤
- 首先我们需要一个折叠面板的框架代码
<el-collapse style="overflow: auto; height: 480px">
<el-collapse-item title="奖励">
// 表格
</el-collapse-item>
// 表格
<el-collapse-item title="处罚">
</el-collapse-item>
</el-collapse>
-
然后在 el-collapse-item 中加入 el-table
<template> <div> <el-collapse style="overflow: auto; height: 480px"> <!-- 奖励表格 --> <el-collapse-item title="奖励"> <el-table :data="data.RPdata.rewardData" border stripe> <el-table-column label="序号" type="index" width="50" align="center"> </el-table-column> <el-table-column v-for="(item, index) in data.RPdata.rewardHead" :key="index" :label="item.label" :prop="item.prop" align="center" > </el-table-column> </el-table> </el-collapse-item> <!-- 处罚表格 --> <el-collapse-item title="处罚"> <el-table :data="data.RPdata.punishData" border stripe> <el-table-column label="序号" type="index" width="50" align="center"> </el-table-column> <el-table-column v-for="(item, index) in data.RPdata.punishHead" :key="index" :label="item.label" :prop="item.prop" align="center" > </el-table-column> </el-table> </el-collapse-item> </el-collapse> </div> </template> <script> export default { data() { return { data: { // 奖惩数据 RPdata: { // 奖励表头 rewardHead: [ { prop: "name", label: "名称", }, { prop: "number", label: "数量", }, ], // 奖励数据 rewardData: [ { name: "1", number: "111" }, { name: "1", number: "111" }, { name: "1", number: "111" }, { name: "1", number: "111" }, { name: "1", number: "111" }, { name: "1", number: "111" }, { name: "1", number: "111" }, { name: "1", number: "111" }, { name: "1", number: "111" }, ], // 处罚表头 punishHead: [ { prop: "name", label: "名称", }, { prop: "number", label: "数量", }, ], // 处罚数据 punishData: [ { name: "2", number: "222" }, { name: "2", number: "222" }, { name: "2", number: "222" }, { name: "2", number: "222" }, { name: "2", number: "222" }, { name: "2", number: "222" }, { name: "2", number: "222" }, { name: "2", number: "222" }, { name: "2", number: "222" }, ], }, }, }; }, }; </script> -
引入无限滚动条
在 vue ui 图形化界面的安装依赖，开发依赖中搜索 vue-infinite-scroll
并且在 中加入 v-infinite-scroll=“load”
二、完整代码
<template>
<div>
<el-collapse style="overflow: auto; height: 480px" v-infinite-scroll="load">
<!-- 奖励表格 -->
<el-collapse-item title="奖励">
<el-table :data="data.RPdata.rewardData" border stripe>
<el-table-column label="序号" type="index" width="50" align="center">
</el-table-column>
<el-table-column
v-for="(item, index) in data.RPdata.rewardHead"
:key="index"
:label="item.label"
:prop="item.prop"
align="center"
>
</el-table-column>
</el-table>
</el-collapse-item>
<!-- 处罚表格 -->
<el-collapse-item title="处罚">
<el-table :data="data.RPdata.punishData" border stripe>
<el-table-column label="序号" type="index" width="50" align="center">
</el-table-column>
<el-table-column
v-for="(item, index) in data.RPdata.punishHead"
:key="index"
:label="item.label"
:prop="item.prop"
align="center"
>
</el-table-column>
</el-table>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
export default {
data() {
return {
data: {
// 奖惩数据
RPdata: {
// 奖励表头
rewardHead: [
{
prop: "name",
label: "名称",
},
{
prop: "number",
label: "数量",
},
],
// 奖励数据
rewardData: [
{ name: "1", number: "111" },
{ name: "1", number: "111" },
{ name: "1", number: "111" },
{ name: "1", number: "111" },
{ name: "1", number: "111" },
{ name: "1", number: "111" },
{ name: "1", number: "111" },
{ name: "1", number: "111" },
{ name: "1", number: "111" },
],
// 处罚表头
punishHead: [
{
prop: "name",
label: "名称",
},
{
prop: "number",
label: "数量",
},
],
// 处罚数据
punishData: [
{ name: "2", number: "222" },
{ name: "2", number: "222" },
{ name: "2", number: "222" },
{ name: "2", number: "222" },
{ name: "2", number: "222" },
{ name: "2", number: "222" },
{ name: "2", number: "222" },
{ name: "2", number: "222" },
{ name: "2", number: "222" },
],
},
},
};
},
};
</script>