1.列展示设置 静态框架初步搭建完成

loulijun2021

2023-01-04 0b1837e9b6d1ac8825e9c1acf6f0cd5b2b14a897

 src/components/Pagination/index.vue

@@ -8,6 +8,7 @@
      :page-sizes="pageSizes"
      :total="total"
      v-bind="$attrs"
      popper-class="select_bottom"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
@@ -35,7 +36,7 @@
    pageSizes: {
      type: Array,
      default() {
        return [5, 10, 20, 100]
        return [10, 20, 50, 100]
      }
    },
    layout: {
@@ -92,10 +93,49 @@

<style scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
  background: #f8f8fa;
  padding: 10px 0;
}
.pagination-container.hidden {
  display: none;
}

/*::v-deep .el-pagination__sizes .el-input .el-input__inner:hover{*/
/* border-color: #42b983 ;*/
/*}*/
/*::v-deep .el-pagination__sizes .el-input .el-input__inner:focus{*/
/*  border-color: #42b983;*/
/*}*/

</style>
<style lang="scss">
.select_bottom{
  //z-index: 2008; position: absolute; left: 147px !important; top: 355px !important; margin: 0px;
  //border: 1px solid #55aaff;
  //.el-select-dropdown {
  //
  //}
  //.el-select-dropdown {
  //  background-color: #ffffff;
  //}

  //.el-select-dropdown__item.selected {
  //  color: #42b983;
  //}

  //.el-select-dropdown__item.hover,
  //.el-select-dropdown__item:hover {
  //  background: red;
  //  color: #fff;
  //}
}

.el-pagination button, .el-pagination span:not([class*=suffix]){
  font-size: 14px;
}

.el-pagination .el-select .el-input .el-input__inner{
  line-height: 34px;
  height: 34px;
}
</style>