element el-pagination solt 使用

 起初只是想修改一下,共多少条的颜色,和跳转至 发现并不支持

网上找通过js修改,因为我这是在 dialog里面的 好像并不能适用

 mounted() {
    document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "跳转";
  },

官网说可以用

但是,solt支持一个,可以使用多个 solt拼接

完成如下(无css)

<div class="pagination">
          <div style="display: flex;justify-content: end;">
            <el-pagination background layout="slot, prev, pager, next,sizes" :current-page.sync="pageIndex"
              :page-size="pageSize" :total="pageTotal" @current-change="handlePageChange" @size-change="handleSizeChange">
              <span key="1" style="color: #3B4C69;">共<span style="color: #0072DF;min-width: 10px;">{{ pageTotal
              }}</span>条</span>
            </el-pagination>
            <el-pagination background layout="slot">
              <span>跳转至第</span>
              <el-input ></el-input>
              <span style="min-width: 17px;">页</span>
            </el-pagination>
          </div>
        </div>

`element .el-pagination` 默认样式在移动端会有一些显示问题,可以通过以下方式解决: 1. 使用 `element-ui` 提供的响应式工具类实现移动端样式适配。例如,可以在 `.el-pagination__sizes` 和 `.el-pagination__pager` 元素上添加 `el-hidden--xs-only` 类,使其只在移动端隐藏。 ```html <el-pagination class="pagination" :page-size="pageSize" :total="total" :current-page="currentPage" layout="total, sizes, prev, pager, next, jumper" > <span slot="sizes" class="el-pagination__sizes el-hidden--xs-only"> 每页显示: <el-select v-model="pageSize" @change="handleSizeChange"> <el-option v-for="item in pageSizeOptions" :key="item" :label="item" :value="item"></el-option> </el-select> </span> <span slot="pager" class="el-pagination__pager el-hidden--xs-only"> <el-button type="text" icon="arrow-left" @click="prevPage" :disabled="currentPage === 1"></el-button> <el-button type="text" icon="arrow-right" @click="nextPage" :disabled="currentPage === pageCount"></el-button> </span> </el-pagination> ``` 2. 自定义样式,对 `.el-pagination` 进行针对性的样式调整。例如,可以对 `.el-pagination__sizes` 和 `.el-pagination__pager` 元素设置 `display: none`,然后在移动端使用 media query 显示这些元素。 ```html <el-pagination class="pagination" :page-size="pageSize" :total="total" :current-page="currentPage" layout="total, sizes, prev, pager, next, jumper" > <span slot="sizes" class="el-pagination__sizes"> 每页显示: <el-select v-model="pageSize" @change="handleSizeChange"> <el-option v-for="item in pageSizeOptions" :key="item" :label="item" :value="item"></el-option> </el-select> </span> <span slot="pager" class="el-pagination__pager"> <el-button type="text" icon="arrow-left" @click="prevPage" :disabled="currentPage === 1"></el-button> <el-button type="text" icon="arrow-right" @click="nextPage" :disabled="currentPage === pageCount"></el-button> </span> </el-pagination> ``` ```css /* 移动端样式 */ @media (max-width: 768px) { .el-pagination__sizes, .el-pagination__pager { display: block; } } /* 非移动端样式 */ @media (min-width: 769px) { .el-pagination__sizes, .el-pagination__pager { display: none; } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值