【UI】elementui el-pagination分页位置靠右

在Element UI中，el-pagination组件默认是靠左对齐的。要使分页组件靠右对齐，可以通过Flex布局实现。

以下是一个简单的例子，演示如何将el-pagination组件靠右对齐：

<template>
  <div class="pagination-container">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="prev, pager, next"
      :total="400">
    </el-pagination>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      currentPage: 1
    };
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  }
};
</script>
 
<style scoped>
.pagination-container {
  display: flex;
  justify-content: flex-end;
}
</style>

在上述代码中，.pagination-container是一个flex容器，通过justify-content: flex-end;将其内部的分页组件靠右对齐。这样做不会改变分页组件的其他功能，只是改变了它在容器中的位置。