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

image

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

采用element-ui中的Carousel组件


  
      
        
          {{c.tag}}
        
      
  
二、自定义显示页数及数据处理
_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
    }

你可能感兴趣的:(vue.js,element-ui)