/* 分页样式 */ .el-pagination { display: flex; justify-content: center; margin-top: 20px; } .el-pagination .el-pager { margin: 0 10px; font-size: 14px; color: #333; border-color: #dcdfe6; border-radius: 2px; cursor: pointer; transition: all .3s; } .el-pagination .el-pager:hover, .el-pagination .el-pager.is-active { color: #fff; background-color: #409EFF; border-color: #409EFF; }修改页码样式为背景颜色白色， 圆形

您可以将.el-pager的样式修改如下：

.el-pagination .el-pager {
  margin: 0 10px;
  font-size: 14px;
  color: #333;
  background-color: #fff;
  border-color: #dcdfe6;
  border-radius: 50%;
  cursor: pointer;
  transition: all .3s;
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

这样就可以将页码的样式修改为白色背景，圆形形状了。需要注意的是，由于圆形的样式需要设置固定的高度和宽度才能生效，所以在样式中添加了height和width属性，并将页码的内容居中显示。

相关问题

vue2手写一个样式跟el-pagenation一样的分页器

可以使用 Vue 2 来手写一个样式与 `el-pagination` 类似的分页器。以下是一个简单的示例：

首先，在你的 Vue 组件中引入分页器组件的样式，例如：

<style>
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.pagination-item {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.pagination-item.active {
  background-color: #ccc;
}
</style>

然后，在模板中使用以下代码来渲染分页器：

<template>
  <div class="pagination">
    <div
      v-for="page in totalPages"
      :key="page"
      :class="['pagination-item', { active: page === currentPage }]"
      @click="changePage(page)"
    >
      {{ page }}
    </div>
  </div>
</template>

接下来，在 Vue 组件的 `data` 属性中定义当前页码和总页数：

data() {
  return {
    currentPage: 1,
    totalPages: 10 // 假设总页数为 10
  };
},

最后，在 Vue 组件的 `methods` 中添加方法来处理页码的切换：

methods: {
  changePage(page) {
    // 处理页码切换逻辑，例如发送请求获取对应页的数据
    this.currentPage = page;
    // 其他逻辑...
  }
}

这样就完成了一个简单的手写分页器，样式与 `el-pagination` 类似。你可以根据自己的需求进一步调整样式和逻辑。

vue2手写一个el-pagenation

当然可以，以下是一个手写的Vue 2的el-pagination组件的示例代码：

<template>
  <div class="el-pagination">
    <button @click="prevPage">Previous</button>
    <ul>
      <li v-for="page in pageCount" :key="page" :class="{ active: currentPage === page }">
        <a @click="changePage(page)">{{ page }}</a>
      </li>
    </ul>
    <button @click="nextPage">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 100
    };
  },
  computed: {
    pageCount() {
      return Math.ceil(this.total / this.pageSize);
    }
  },
  methods: {
    changePage(page) {
      this.currentPage = page;
      // 触发页码改变的事件，可以在父组件监听该事件并更新数据
      this.$emit('page-change', page);
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.changePage(this.currentPage - 1);
      }
    },
    nextPage() {
      if (this.currentPage < this.pageCount) {
        this.changePage(this.currentPage + 1);
      }
    }
  }
};
</script>

<style scoped>
.el-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-pagination button {
  margin: 0 5px;
}

.el-pagination ul {
  list-style: none;
  display: flex;
}

.el-pagination li {
  margin: 0 5px;
}

.el-pagination li a {
  text-decoration: none;
  color: #333;
  padding: 5px;
}

.el-pagination li.active a {
  font-weight: bold;
}
</style>

这是一个简单的分页组件，包含了上一页、下一页按钮以及页码列表。你可以根据需要进行样式的修改和功能的扩展。希望能帮到你！如果还有其他问题，请继续提问。