Vue + ElementUI分页实现 通俗易懂

页面效果

Vue + ElementUI分页实现 通俗易懂_第1张图片

本文提及

Http 封装类

Template

// elementui 分页数据 slice  每页显示内容计算  arrayData 分页数组
//:data="arrayData.slice((currentPage-1)*pageSize,pageSize*currentPage)" 
<el-table v-if="total!=null" :data="arrayData.slice((currentPage-1)*pageSize,pageSize*currentPage)" border
 style="width: 100%" class="mt-2">
 <el-table-column fixed prop="qname" show-overflow-tooltip label="名称" width="150"></el-table-column>
 <el-table-column fixed prop="code" show-overflow-tooltip label="编号" width="100"></el-table-column>
 <el-table-column fixed prop="description" show-overflow-tooltip label="简介" width="300"></el-table- column> 
 //:formatter 指定格式化日期函数 
<el-table-column fixed prop="createDate" show-overflow-tooltip label="时间" :formatter="dateFormat" width="170"/> 
<el-table-column fixed="right" show-overflow-tooltip label="操作" width="250">
//使用 template  属性 scope 获取 行 内对象属性
            <template slot-scope="scope">
              <el-button
              //当前 行 内code 属性 scope.row
                @click="showProject(scope.row.code)"
                type="text"
                size="small"
              >查看
              </el-button>
              <el-button
                @click="updateProject(scope.row.code)"
                type="text"
                size="small"
              >修改
              </el-button>
              <el-button
                @click="delProject(scope.row.code)"
                type="text"
                size="small"
              >删除
              </el-button> 
            </template>
          </el-table-column> 
        </el-table>
//分页控制条
 <el-pagination
          class="mt-2"
          //每页显示条数改变
          @size-change="handleSizeChange"
          //当前页改变
          @current-change="handleCurrentChange"
          //绑定当前页
          :current-page="currentPage"
          //每页显示条数选择
          :page-sizes="[5, 10, 20, 40,50,100]"
          //每页显示大小
          :page-size="pageSize"
          // 显示样式 
          layout="total, sizes, prev, pager, next, jumper"
          //总记录数
          :total="total"
 ></el-pagination>

Script

 export default {
    name: 'Project',
    components: {
      addNewModal,
      editCurrentModal,
      viewDetailModal
    },
    data () {
      return {
        //数据集
        arrayData: [],
        //初始化总记录数 0
        total: 0,
        //每页大小默认显示10条
        pageSize: 10,
        //当前页默认1
        currentPage: 1,
      }
    },method(){
    // 出发获取数据函数
		getData(){
		   //获取已封装方法 见 https://blog.csdn.net/ForeverBana/article/details/103384936
		   this.arrayData = await getp('item/list', params)
		   //设置总页数
           this.total = this.arrayData.length
		},
		// 日期格式化函数
		dateFormat: function (row, column) {
        var date = row[column.property]
        if (date == undefined) {
          return ''
        }
        return moment(date).format('YYYY-MM-DD')
      },
      //页码切换事件
      handleCurrentChange (currentPage) {
        this.currentPage = currentPage
      },
       //每页下拉显示条数切换事件
      handleSizeChange (pagesize) {
        this.pageSize = pagesize
        //恢复首页 
        this.currentPage = 1
        //重新获取集合列表
        this.getData()
      },
	}
}

你可能感兴趣的:(Vue,Element,UI)