el-Collapse 折叠面板中嵌套 el-table

el-Collapse 折叠面板中嵌套 el-table

这个是el-collapse中嵌套el-table，并且可以在页面中实现无限滚动。

效果图：

一、实现步骤

1. 首先我们需要一个折叠面板的框架代码

<el-collapse style="overflow: auto; height: 480px">    
	<el-collapse-item title="奖励">
        // 表格
	</el-collapse-item>
        // 表格
	<el-collapse-item title="处罚">
         
	</el-collapse-item>
</el-collapse>

2. 然后在 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>
   

3. 引入无限滚动条

   在 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>