ElementUI，table页面实现两个页面的切换

Posted 2022-12-01 有时间指导毕业设计SmallMonkey

vue定义的data数据，methods数据，全部都在这个里面了

过滤出不同类型的数组，然后在不同的table页面和表枚进行展示。

// 公告栏
getAnnouceData()
  pageAnnouceListApi().then((res) => 
    if (res.resultCode == 0) 
      this.announceList = res.data;
      // console.log(this.announceList,"announcelist--------------------");
      this.announceList1 =  this.announceList.filter(function (type) 
        return type.annType == "系统通知";
      );
      this.page1.totalPage1 = this.announceList1.length;

      this.announceList2 =  this.announceList.filter(function (type) 
        return type.annType == "其他";
      );

      this.page2.totalPage2 = this.announceList2.length;
    
  ).catch((err) => 
    this.$store.dispatch("loading/CHANGE_LOADING", false);
  );
,

// 每页数
sizeChangeHandle1(val) 
  this.page1.pageSize1 = val;
  this.page1.pageIndex1 = 1;
  this.getAnnouceData();
,
// 当前页
currentChangeHandle1(val) 
  this.page1.pageIndex1 = val;
  this.getAnnouceData();
,

// 每页数
sizeChangeHandle2(val) 
  this.page2.pageSize2 = val;
  this.page2.pageIndex2 = 1;
  this.getAnnouceData();
,
// 当前页
currentChangeHandle2(val) 
  this.page2.pageIndex2 = val;
  this.getAnnouceData();
,


//  前往末页
toLastPage1() 
  let max = Math.ceil(this.tablePage.totalResult / this.tablePage.pageSize1);
  this.handleCurrentChange(max);
,

toLastPage2() 
  let max = Math.ceil(this.tablePage.totalResult / this.tablePage.pageSize2);
  this.handleCurrentChange(max);
,
// -----------











   page1: 
        pageIndex1: 1,
        pageSize1: 10,
        totalPage1: 0,
      ,
      page2: 
        pageIndex2: 1,
        pageSize2: 10,
        totalPage2: 0,
      ,
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
        <!-- 弹框：意外原因 -->
      <el-dialog
        v-dialogDrag
        title="公告栏"
        :visible.sync="annDialog"
        width="40%"
        class="dialogBox">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="系统通知" name="first">
            <el-table
              :data="announceList1"
              tooltip-effect="dark"
              style="width: 100%"
            >
              <el-table-column  label="公告内容" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>  <strong style="color: deepskyblue"> scope.row.annContent </strong> - '('+scope.row.startTime +')' || "--" </span>
                </template>

              </el-table-column>


            </el-table>
            <el-row>
              <el-col :span="24">
                <div class="pagination">
                  <!-- 分页 -->
                  <el-pagination background @size-change="sizeChangeHandle1" @current-change="currentChangeHandle1"
                                 :current-page="page1.pageIndex1" :page-sizes="[10, 20, 50, 100]" :page-size="page1.pageSize1"
                                 :total="page1.totalPage1" layout="total, sizes, prev, pager, next, jumper">
                  </el-pagination>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>

          <el-tab-pane label="其他" name="second">
            <el-table
              :data="announceList2"
              tooltip-effect="dark"
              style="width: 100%"
            >
              <el-table-column  label="公告内容" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span>  <strong style="color: deepskyblue"> scope.row.annContent </strong>
                    <span v-if="scope.row.startTime != null"> '-'+'('+scope.row.startTime +')' || "--" </span>
                    </span>
                </template>

              </el-table-column>


            </el-table>
            <el-row>
              <el-col :span="24">
                <div class="pagination">
                  <!-- 分页 -->
                  <el-pagination background @size-change="sizeChangeHandle2" @current-change="currentChangeHandle2"
                                 :current-page="page2.pageIndex2" :page-sizes="[10, 20, 50, 100]" :page-size="page2.pageSize2"
                                 :total="page2.totalPage2" layout="total, sizes, prev, pager, next, jumper">
                  </el-pagination>
                </div>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>





      </el-dialog>