前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue css js 多行多列实现需求

Vue css js 多行多列实现需求

作者头像
solate
修改2023-09-24 19:54:49
2.5K0
修改2023-09-24 19:54:49
举报
文章被收录于专栏:solate 杂货铺

需求

需要实现一个循环来循环元素,每行4个元素

css flex

CSS flex实现多行多列的多种方式

vue v-for实现多行等分布局-三等分

代码语言:javascript
复制
<template>
  <div >
<!--    <div v-for="item in dataList" class="parent">-->
<!--      <div class="child">{{item.id }}</div>-->
<!--    </div>-->

    <h3><pre><span>1.flex合并属性 </span><span>flex: 1 0 50%;</span></pre></h3>
    <section class="flex-outer flex-attr">
      <article>1</article>
      <article>2</article>
      <article>3</article>
      <article>4</article>
    </section>

    <h3><pre><span>2.基准属性</span><span>flex-basis: 50%;</span></pre></h3>
    <section class="flex-outer flex-basis">
      <article>1</article>
      <article>2</article>
      <article>3</article>
      <article>4</article>
    </section>

    <h3><pre><span>3.设置width</span><span>width: 50%;</span></pre></h3>
    <section class="flex-outer width-attr">
      <article>1</article>
      <article>2</article>
      <article>3</article>
      <article>4</article>
    </section>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataList: [
        { id: 1, name: 'F1' },
        { id: 2, name: 'F2' },
        { id: 3, name: 'F3' },
        { id: 4, name: 'F4' },
        { id: 5, name: 'F5' },
        { id: 6, name: 'F6' },
        { id: 7, name: 'F6' },
      ]
    }
  },
}
</script>

<style scoped>

.flex-outer {
  display: flex;
  flex-wrap: wrap;
}

.flex-outer article {
  background: limegreen;
  border: 1px solid #eee;
  box-sizing: border-box;
  color: #fff;
  padding: 15px;
}

/* flex合并属性 */
.flex-outer.flex-attr article  {
  flex: 1 0 50%;
}

/* flex-basis */
.flex-outer.flex-basis article {
  flex-basis: 50%;
}

/* 设置width */
.flex-outer.width-attr article {
  width: 50%;
}

pre {
  display: flex;
  justify-content: space-between;
}
</style>

自己实现

代码语言:javascript
复制
<template>
  <div>
    <div class="wrapper">
      <div class="wrapper-content" v-for="item in dataList">
        <span>{{item.id}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data () {
    return {
      dataList: [
        { id: 1, name: 'F1' },
        { id: 2, name: 'F2' },
        { id: 3, name: 'F3' },
        { id: 4, name: 'F4' },
        { id: 5, name: 'F5' },
        { id: 6, name: 'F6' },
        { id: 7, name: 'F6' },
      ]
    }
  },
}
</script>

<style scoped>

.wrapper{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: left;
}
.wrapper-content{
  width: 33%;
}


</style>

有些说css控制有时候不起作用,那么就需要js来控制

js 实现

VUE的for循环一行两列

vue+elementui 实现每行两列循环

代码语言:javascript
复制
<template>
  <div >
    <div v-for='(item,index) in dataList' v-if='index%2==0'>
      <tr >
        <td style="width: 50px; background: red">
          {{item.id}}
        </td>
        <td v-if='index+1<dataList.length'>
          {{dataList[index+1].id}}
        </td>
      </tr>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dataList: [
        { id: 1, name: 'F1' },
        { id: 2, name: 'F2' },
        { id: 3, name: 'F3' },
        { id: 4, name: 'F4' },
        { id: 5, name: 'F5' },
        { id: 6, name: 'F6' },
        { id: 7, name: 'F6' },
      ]
    }
  },
}
</script>

<style scoped>

</style>

这种方式虽然可以实现数据换行,但是要写很多逻辑,而且要算好下标,感觉也不是很好

将一维数据转换成二维数组

vue v-for list数据循环 每3或者(n)个一组

代码语言:javascript
复制
<template>
  <div >
    <div class="wrapper" v-for="(item) in computedList">
      <div class="wrapper-content" v-for="(cell, i) in item" :key="i">
        <div class="flex-outer" style="width: 25%">{{cell.id}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data () {
    return {
      dataList: [
        { id: 1, name: 'F1' },
        { id: 2, name: 'F2' },
        { id: 3, name: 'F3' },
        { id: 4, name: 'F4' },
        { id: 5, name: 'F5' },
        { id: 6, name: 'F6' },
        { id: 7, name: 'F6' },
      ]
    }
  },
  computed: {
    computedList() {
      let index = 0;
      let num = 4; // 每行几个元素
      let arr = [];
      for (let i=0; i<this.dataList.length; i++) {
        index = parseInt(i/num);
        if (arr.length <= index) {
          arr.push([]);
        }
        arr[index][i%num] = this.dataList[i];
      }
      console.log(arr)
      return arr;
    }

  },
}
</script>

<style scoped>

.wrapper{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
}
.wrapper-content{
  width: 33%;
}


</style>

这个一维数组转换二位数组算法可以优化,后续补充

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 需求
    • css flex
      • js 实现
        • 将一维数据转换成二维数组
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档