vue-admin-template分页搜索排序

准备

• build git-vue-admin-template

  git clone https://github.com/PanJiaChen/vue-admin-template.git
  cd vue-admin-template
  # 安装依赖
  npm install --verbose --registry=https://registry.npm.taobao.org
  # 开发环境运行
  npm run dev
  # 编译到线上
  npm run build:prod
  

  http://localhost:9528/

• advanced

  # 调优
  npm run preview
  # 调优查看
  npm run preview -- --report
  # 代码格式
  npm run lint
  # 检查代码格式
  npm run lint -- --fix
  

• 部署 deployment

  # 生产dist文件
  npm run build:prod 
  # 本地预览
  npm install -g serve --verbose
  serve -s dist
  

实战

分页pagination

• 关键点： 表格绑定当前页数据

搜索search

• 关键点： 双向绑定事件响应关联表格数据

排序sort

• 关键点：指定prop与sortable

加载loading

• 关键点： 绑定后根据bool类型决定

代码附录

• javascript

  <script>
  export default {
    data() {
      return {
        isLoading: true,   // 默认加载
        pageList: [],      // 当前页数据
        total: 0,          // 总数据条数
        currentPage: 1,    // 当前页
        pagelimit: 2,      // 页面展示数据条数
        list: [],          // 原始数据
        search: [],        // 搜索字段
        tmpList: []        // 临时搜索结果数据
      }
    },
  
    created() {
      this.initList()
    },
  
    methods: {
      // 模拟初始原始数据
      initList() {
        this.list = [
          { name: 'axxx', request: 1, availab: '10%', hit: '10%', restime: 60, bandwidth: 50, xx4: 50, xx5: 50, backnum: 5, backband: 50, back4xx: 10, back5xx: 20 },
          { name: 'bAAx', request: 2, availab: '20%', hit: '10%', restime: 60, bandwidth: 50, xx4: 50, xx5: 50, backnum: 5, backband: 50, back4xx: 10, back5xx: 20 },
          { name: 'aaxxx', request: 3, availab: '30%', hit: '10%', restime: 60, bandwidth: 50, xx4: 50, xx5: 50, backnum: 5, backband: 50, back4xx: 10, back5xx: 20 }      ]  
        this.initPageList()
      },
      
      // 初始页面数据
      initPageList() {
        this.isLoading = false         // 有数据关闭加载表示
        this.total = this.list.length
        this.pagelimit = 2           
        this.pageList = this.list.slice((this.currentPage - 1) * this.pagelimit, this.currentPage * this.pagelimit)  // 当前页数据内容
      },
          
      // 改变页面条数
      handleSizeChange: function(size) {
        this.pagelimit = size
        this.initPageList()
      },
          
      // 改变当前页
      handleCurrentChange: function(currentPage) {
        this.currentPage = currentPage
        this.initPageList()
      },
       
      // 模糊搜索
      handleFilter: function() { 
        this.isLoading = true
        // 原始数据过滤出 包含搜索字段的 数据结果
        this.tmpList = this.list.filter(data => !this.search || data.name.toLowerCase().includes(this.search.toLowerCase()))  
        // 判断是否为全局搜索与空搜索
        if (this.tmpList.length === this.list.length || this.tmpList.length === 0) {
          this.initPageList()
        } else {
          // 搜索结果以一页展示
          this.isLoading = false
          this.pageList = this.tmpList
          this.currentPage = 1
          this.pagelimit = this.tmpList.length
          this.total = this.tmpList.length
        }
      }
    }
  }
  </script>
  

• template

  <template>
    <div class="app-container">
      <div style="width: 100%;margin-top:30px;margin-left:30px">
         <!-- v-model实现双向绑定,handleFilter事件响应 原生回车事件  -->
        <el-input v-model="search" placeholder="域名" style="width: 400px;" @keyup.enter.native="handleFilter" />
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
          查询
        </el-button>
      </div>
  
      <!-- v-loading加载与排序sort --> 
      <el-table
        v-loading="isLoading"
        :data="pageList"
        style="width:90%;margin-top:30px;margin-left:30px"
        border
        :default-sort="{prop: 'request', order: 'descending'}"
      >
        <el-table-column align="center" label="域名" prop="name" />
        <el-table-column align="center" label="请求数" prop="request" sortable />
        <el-table-column align="center" label="可用率" prop="availab" sortable />
        <el-table-column align="center" label="命中率" prop="hit" sortable />
        <el-table-column align="center" label="响应时间" prop="restime" sortable />
        <el-table-column align="center" label="带宽" prop="bandwidth" sortable />
        <el-table-column align="center" label="4xx" prop="xx4" sortable />
        <el-table-column align="center" label="5xx" prop="xx4" sortable />
        <el-table-column align="center" label="回源次数" prop="backnum" sortable />
        <el-table-column align="center" label="回源带宽" prop="backband" sortable />
        <el-table-column align="center" label="回源4xx" prop="back4xx" sortable />
        <el-table-column align="center" label="回源5xx" prop="back5xx" sortable />
      </el-table>
  
      <div style="width:90%;margin-top:30px;margin-left:30px">
        <!-- 分页 -->
        <el-pagination
          background
          :current-page="currentPage"
          :page-sizes="[10,15,20]"
          :page-size="pagelimit"
          layout="total,prev,pager,next,jumper,sizes"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </template>