vue+elementUI实现点击左右箭头切换按钮功能

原本是可以用el-tabs做的,就像下面的样式,但是领导说不行

最后用button和element里面的el-carousel(走马灯)结合了一下

长这样  感觉还不错 可以自己改样式


代码如下:

        <div class="drawer-carousel">
          <el-carousel arrow="always" :loop="false" :initial-index="0" indicator-position="none" :autoplay="false"
            height="60px" :items-per-page="6">
            <el-carousel-item v-for="(group, index) in Math.ceil(tabs.length / 6)" :key="index">
              <div class="button-group">
                <el-button v-for="(tab, tabIndex) in tabs.slice(index * 6, (index + 1) * 6)" :key="tabIndex"
                  @click="handleClickReport(tab.reportCoreId)" size="medium">
                  <el-tooltip :content="tab.reportCoreName" :disabled="isShowTooltip" :open-delay="100" placement="top"
                    effect="light">
                    <span class="span-ellipsis" @mouseover="mouseOver($event)">{{ tab.reportCoreName }}</span>
                  </el-tooltip>

                </el-button>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>

 

解释一下

  • arrow="always" 显示左右箭头,loop="false" 表示不循环滚动,indicator-position="none" 表示不显示指示器,:autoplay="false" 表示不自动播放,height="60px" 设置 Carousel 的高度,:items-per-page="6" 表示每页显示6个按钮。

  • <el-carousel-item>:这是 Carousel 的每一页,  用 v-for 循环来生成足够的 Carousel 页面,存放所有的按钮。Math.ceil(tabs.length / 6) 计算出需要多少页,每页6个按钮。

  • <el-button>:用 v-for 循环来生成每一页中的6个按钮。用 tabs.slice(index * 6, (index + 1) * 6) 来选取每页6个按钮,确保在当前页面范围内显示正确的按钮。

一些css样式

  .drawer-carousel {
    padding: 10px 10px 0 0;
    position: relative;

    .button-group {
      margin: 0 20px 0 40px;
      white-space: nowrap;

      span {
        display: inline-block;
        width: 90px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  } 
//按钮样式
 .el-carousel__arrow--left,
  .el-carousel__arrow--right {
    font-size: 30px;
    color: #1C1C1C;
  }

  .el-carousel__arrow--left {
    left: 0px;
  }

  .el-carousel__arrow--right {
    right: 0;
  }

如果放六个超出了,就设置一下button不换行  再给里面的文字设置超出显示省略号就好了

  • 4
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VueElement UI都是现代化的前端框架,各自拥有强大的API和功能。在Vue中,我们可以简单地使用v-for指令和props从服务器加载表格数据,并在页面上呈现出来。然后,我们可以使用v-on指令(或简化的@符号)来监听单元格的点击事件。当单元格被点击时,我们可以使用Element UI的Dialog组件来呈现一个弹框。 具体实现过程如下: 1. 首先,我们需要安装VueElement UI。你可以单独下载这两个框架,然后将它们引入你的项目中,或者你可以使用npm来安装它们: npm install vue npm install element-ui 2. 然后,我们需要从服务器加载表格数据。假设数据已经存储在组件的data属性中,并且我们使用了一个简单的表格模板: <table> <thead> <tr> <th>名称</th> <th>价格</th> <th>描述</th> </tr> </thead> <tbody> <tr v-for="(item, index) in items" :key="index"> <td>{{ item.name }}</td> <td>{{ item.price }}</td> <td>{{ item.description }}</td> </tr> </tbody> </table> 3. 接下来,我们需要监听单元格的点击事件。我们可以为每个单元格添加一个事件处理程序,并从事件对象中获取所点击的单元格的数据。为了简化代码并提高可维护性,我们可以将单元格的点击事件封装在一个自定义组件中: <template> <td @click="showDialog">{{ value }}</td> </template> <script> export default { props: ['value'], methods: { showDialog() { // 显示弹框 } } } </script> 4. 最后,我们需要使用Element UI的Dialog组件来创建一个弹框,用来显示所选中单元格的详细信息。我们可以在自定义组件的showDialog方法中使用Dialog组件来实现: <template> <td @click="showDialog">{{ value }}</td> </template> <script> export default { props: ['value'], methods: { showDialog() { this.$alert(this.value, '详细信息', { confirmButtonText: '确定' }) } } } </script> 在上面这个例子中,我们使用了Element UI的$alert方法来创建一个弹框,其中的文本内容就是我们所点击单元格的数据。Dialog组件的具体使用方法可以在官方文档中查看。 总结: 以上就是使用VueElement UI实现点击表格中单元格后弹出弹框的简单实现方法。通过这个例子,我们可以看到VueElement UI的强大功能和易用性。如果你还不熟悉这两个框架,那么现在就是时候开始学习它们了!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值