vue element table组件+页码pagination组件的组合使用

效果如图:

 

 代码:

<template>
  <div class="equipment">
    <div class="title">
      <div class="titleTop">
        <ul>
          <li>
            <div>装备名称:</div>
            <input class="ListTable_Text">
          </li>
          <li>
            <div>装备类型:</div>
            <input class="ListTable_Text ">
          </li>
          <li>
            <div>应急子类型:</div>
            <input class="ListTable_Text ">
          </li>
          <li>
            <div>距离:</div>
            <input class="ListTable_Text ">
          </li>
          <li> <button>搜索</button></li>
        </ul>
      </div>
    </div>
    <el-table
      :data="listTable"
      size="small"
      :header-cell-style='{"text-align":"center","background":"#054DAD","color":"#fff","border":"none","height":"30px;"}'
      :cell-style='{"text-align":"center","color":"#4BF3F9","border":"none","border-bottom":"1px solid #195fba !important",}'
      class="tableBox"
      :row-class-name="isShowBC"
    >
      <el-table-column
        label=""
        type="selection"
        :selectable='checkboxSelect'
      >
        <el-checkbox></el-checkbox>
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
      >

      </el-table-column>
      <el-table-column
        align="center"
        prop="equipName"
        label="装备名称"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        align="center"
        prop="equipFormationQuantity"
        label="总数量"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        align="center"
        prop=""
        label="联系人"
        show-overflow-tooltip
      >/</el-table-column>
      <el-table-column
        align="center"
        prop=""
        label="联系电话"
        show-overflow-tooltip
      >/</el-table-column>
      <el-table-column
        align="center"
        prop="equipVillageTown"
        label="所属队伍"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        align="center"
        prop="equipVillageTown"
        label="地址"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        align="center"
        prop="equipVillageTown"
        label="行政区划"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop=""
        label="直线距离"
        show-overflow-tooltip
      >/
      </el-table-column>
    </el-table>

    <div class="Msgpage">
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="11"
        :total="total"
        @current-change="pageChange"
      >
      <!-- page-size 每一页页码显示多少条数据 ,pageChange事件 点击页码时触发要触发的回调方法-->
      </el-pagination>
      <div class="MspageTol">共<span>{{total}}条</span></div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    flag: false,
    total: 0,
    listTable: [],
    totalPage: [],
    pageSize: 10,
    currentPage: 1,
  }),
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      let params = {
        orgCode: 330881003,
        pageNo: this.currentPage ? this.currentPage : 1,
        pageSize: 11,
        bigType: '',
        name: ''
      }
      this.$api.natureEquipementData(params).then(res => {
        console.log(res);
        this.total = res.total
        this.listTable = res.rows;
      })
    },
    checkboxSelect(row, rowIndex) {

    },
    isShowBC(row) {
      //根据row.index来根据行数改变背景颜色
      if (row.rowIndex % 2 !== 0) {
        return 'bcGround'
      } else {
        return ''
      }
    },
    pageChange(val) {
      //给接口传入当前页码值,并二次请求来更新对应页码的数据
      this.currentPage = val;
      this.getData()
    },
  }
}
</script>
<style lang="less" >
.equipment {
  padding: 0 30px;
  margin-top: 20px;
  .title {
    margin-bottom: 20px;
    .titleTop {
      color: #53e1fd;
      ul {
        list-style: none;
        display: flex;
        justify-content: space-between;
        li {
          display: flex;
          align-items: center;
          div {
            margin-right: 10px;
          }
          button {
            width: 68px;
            height: 30px;
            background: rgba(83, 225, 253, 1);
            border: none;
            cursor: pointer;
          }
        }
      }
    }
    .ListTable_Text {
      width: 110px;
      height: 30px;
      border: 1px solid #2d96ff !important;
      line-height: 38px;
      text-align: left;
      text-indent: 10px;
      background: rgba(45, 150, 255, 0.5);
      outline: 0;
      // caret-color: #58d5e2;
      color: white;
    }
    input::-webkit-input-placeholder {
      color: white;
    }
  }
  .Msgpage {
    display: flex;
    justify-content: right;
    align-items: center;
    margin-top: 16px;
    .el-pager {
      li {
        margin: 0;
        border: 1px solid #195fba;
        background: transparent;
        border-right: 0;
        color: #17a9cc;
        border-right: 0;
        width: 10%;
      }
    }

    .el-pagination {
      button {
        margin: 0;
        border: 1px solid #195fba;
        background: transparent;
        color: #17a9cc;
      }
    }

    .MspageTol {
      line-height: 50px;
      color: #17a9cc;
    }

    .MspageActice {
      background-color: #0c93ff !important;
      color: white;
    }
  }

  .el-icon-arrow-up {
    line-height: 30px;
    color: #22e0fe !important;
  }

  .el-input__inner {
    color: #22e0fe;
    width: 80px !important;
  }

  .bcGround {
    background: #002872 !important;
    border-top: 1px solid #195fba;
    border-bottom: 1px solid #195fba;
  }
  .tableBox {
    tr {
      padding: 0px !important;
      height: 30px;
      background-color: #01194f;
    }
    td {
      padding: 0px !important;
      height: 30px;
    }
    .el-button {
      height: 20px;
      background-color: #01194f;
      border: 1px solid #195fba !important;
      color: #1eceee !important;
      display: flex;
      align-items: center;
      margin-left: 40px;
    }
  }
  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    position: absolute;
    z-index: -1111 !important;
  }
  .el-table__empty-block {
    height: 330px !important;
    position: relative;
    background-color: #01194f;
    span {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      z-index: 999;
      margin-top: 140px;
      color: #19b5d7;
      font-size: 20px;
      font-weight: bold;
    }
  }
  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #ff99004a;
  }
  .el-table__header th {
    padding: 0;
  }
  .el-table {
    height: 360px;
    background-color: #002872;
  }
}
</style>