vue + element-ui实现左右箭头切换，每页显示自定义数据。

刺骨的言语ヽ痛彻心扉 2023-09-24 16:10 8阅读 0赞

![e4e207a93c1edb82d83351a2cd943216.png][]

### 一、如何实现左右箭头切换？ ###

--------------------

[采用element-ui中的Carousel组件][element-ui_Carousel]

<el-carousel arrow="always" :loop="false" :initial-index="0"
         indicator-position="none" :autoplay="false" height="60px">
      <el-carousel-item v-for="(item, index) in _GroupCout" :key="index">
          <el-tooltip
          v-for="(c, index) in item"
          :key="index"
          effect="light"
          :content="c.description"
          placement="top-start">
            <el-button type="primary" @click="commandClick(c, index)">
              {
        {c.tag}}
            </el-button>
          </el-tooltip>
      </el-carousel-item>
    </el-carousel>

### 二、自定义显示页数及数据处理 ###

--------------------

_GroupCout () {
          // 获取数据
          const objArray = this._Commands
          // 拿到数组的长度
          const len = objArray.length
          // 自定义每页显示多少个数据-假设每行显示10个
          const n = 10
          const lineNum = len % 10 === 0 ? len / 10 : Math.floor((len / 10) + 1)
          const res = []
           // 处理
          for (let i = 0; i < lineNum; i++) {
            const temp = objArray.slice(i * n, i * n + n)
            res.push(JSON.parse(JSON.stringify(temp)))
          }
          return res
        }

[e4e207a93c1edb82d83351a2cd943216.png]: https://img-blog.csdnimg.cn/img_convert/e4e207a93c1edb82d83351a2cd943216.png
[element-ui_Carousel]: https://link.juejin.cn/?target=url

发表评论取消回复

表情：

评论列表（有 0 条评论，8人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui数据表格自定义每页条数limit设置

layui数据表格自定义每页条数limit设置 table.render({ elem: 'data_grid' //,width:

柔情只为你懂/ 2024年03月22日 13:39/ 0 赞/ 42 阅读

相关 vue + element-ui实现左右箭头切换，每页显示自定义数据。

![e4e207a93c1edb82d83351a2cd943216.png][] 一、如何实现左右箭头切换？ -------------------- [采用ele

刺骨的言语ヽ痛彻心扉/ 2023年09月24日 16:10/ 0 赞/ 9 阅读

相关 vue自定义组件实现底部导航栏动态切换

我们都知道vue的两大特性：组件化和数据驱动，今天我们就来说说关于vue组件开发，最近由于开发一款移动端商城，底部的导航栏就利用组件化实现的，下面先看看效果图： ![2020

我会带着你远行/ 2023年07月20日 13:55/ 0 赞/ 21 阅读

相关 vue elementui 日历内容自定义

<el-calendar v-else v-model="toMonth"> <template slot="dateCell" slot-sc

向右看齐/ 2023年01月15日 03:39/ 0 赞/ 404 阅读

相关 Echarts中legend翻页自定义箭头

官网示例中的效果是 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

不念不忘少年蓝@/ 2022年09月02日 00:45/ 0 赞/ 460 阅读

相关 elementui自定义表头

前几天接到了一个这样的需求 ![这个表格的上面有两行显示文字，而且是变量][8739] 整个项目主要用的element-ui+vue，于是就去element-ui中寻找,找

约定不等于承诺〃/ 2022年04月23日 00:48/ 0 赞/ 492 阅读

相关 vue 自定义标签页

本篇文章我们通过以前学习过的知识来构建一个自己的标签页组件。首先我们创建一个基于vue的项目，我用的IDE是webstorm。 ![在这里插入图片描述][waterm

柔光的暖阳◎/ 2022年04月10日 01:27/ 0 赞/ 940 阅读

相关 Vue + ElementUI实现动态获取表格数据并分页

首先，引用必需的js和css文件，这里我已经下载到本地了，你们改成自己的地址就行。  <link rel="stylesheet"

雨点打透心脏的1/2处/ 2022年03月17日 05:56/ 0 赞/ 1252 阅读

相关利用vue自定义指令directive实现拖动elementUI的dialog

<template> <el-dialog :visible.sync="testDialog" title="测试弹框拖拽" v-dialog

叁歲伎倆/ 2021年12月20日 00:39/ 0 赞/ 330 阅读

相关自定义tabs切换显示不同内容(Vue)

使用方法: (1)传入内容为标题的title数组 (2)向外传递了一个currentIndex的方法,参数就是当前选中标题的索引根据索

喜欢ヅ旅行/ 2021年07月24日 19:20/ 0 赞/ 893 阅读