Element Table Pagination 分页

Element

Table

显示图片

     <el-table-column label="PC 图片">
            <template width="300" slot-scope="scope">
              <img :src="scope.row.urlPc" class="avatar" />
            </template>
          </el-table-column>

点击link
 

<el-table-column label="会议名称" width="500">
          <template slot-scope="scope">
            <a :href="scope.row.url" target="_blank" >{{scope.row.name}}</a>
          </template>
         </el-table-column>

Pagination

<el-pagination
      layout="prev, pager, next"
      :current-page="searchPara.pageNum" :page-size="searchPara.pageSize"
     :total="totalListNum" @current-change="pageChange">
     </el-pagination>

data() {
    return {
      searchPara:{ 
        pageNum:1, //页码
        pageSize:10, //每页显示条数
      },
      totalListNum:0, //共计多少条数据
    };
  },


  pageChange(currentPage){ //分页功能
      this.searchPara.pageNum = currentPage;
      this.getMeetingList();
    },

searchMeeting(){ //搜索会议
      this.searchPara.pageNum = 1; //每次搜索的时候，页码都要设置成初始值，否则搜索结果将会错误
      this.getMeetingList();
    },


getMeetingList(){ //得到会议列表
      Service.getMeetingReference(this.searchPara).then((result) => {
        if (result.data.state === "success") {
          let data = result.data;
          this.tableData = data.docs;
          this.totalListNum = data.total;
        }
      });
    },