Vue.js实现每3个元素生成一行时无法调整元素顺序的问题求助

Hey there! It looks like the issue here is how _.chunk() is organizing your stories data—right now it's grouping items row-first (grabbing the first 3 items for the first row, next 3 for the second, etc.). If your desired layout needs a different ordering (like column-first arrangement, custom sequence, or manual reordering), we’ll need to adjust how you split and arrange the data.

Let’s break down solutions based on common scenarios:

Scenario 1: You need column-first layout (fill columns before rows) #

If you want to stack items vertically first (e.g., first column gets items 1,4,7; second gets 2,5,8; third gets 3,6,9) then render them row-wise, replace your chunkedItems computed property with this custom grouping function:

computed: {
  columnFirstChunked() {
    const columnCount = 3;
    const rows = Math.ceil(this.stories.length / columnCount);
    const result = [];
    
    // Build rows by picking corresponding items from each column
    for (let rowIndex = 0; rowIndex < rows; rowIndex++) {
      const row = [];
      for (let colIndex = 0; colIndex < columnCount; colIndex++) {
        const itemIndex = colIndex * rows + rowIndex;
        if (this.stories[itemIndex]) {
          row.push(this.stories[itemIndex]);
        }
      }
      result.push(row);
    }
    return result;
  }
}

Then update your template to use the new computed property:

<el-row v-for="story of columnFirstChunked" :key="story[0]?.id">
  <el-col v-for="item of story" :key="item.id">
    <el-card>
      <div>{{ item.title }}</div>
      <div>{{ item.text }}</div>
    </el-card>
  </el-col>
</el-row>

Scenario 2: You want manual drag-and-drop reordering #

If you need users to rearrange items freely, you’ll need a drag-and-drop library to modify the original stories array (since chunkedItems will automatically update when the source array changes). Here’s a simplified example using vuedraggable:

First install the library:

npm install vuedraggable

Then update your component:

<template>
  <div class="home">
    <el-container>
      <vuedraggable v-model="stories" item-key="id">
        <el-row v-for="story of chunkedItems" :key="story[0]?.id">
          <el-col v-for="item of story" :key="item.id">
            <el-card>
              <div>{{ item.title }}</div>
              <div>{{ item.text }}</div>
            </el-card>
          </el-col>
        </el-row>
      </vuedraggable>
    </el-container>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  computed: {
    chunkedItems() {
      return this.$_.chunk(this.stories, 3);
    },
  },
  // ... rest of your component logic
};
</script>

Scenario 3: You need a custom fixed order #

If you have a specific sequence in mind (e.g., display item 5 first, then item 2), sort the stories array before chunking:

computed: {
  chunkedItems() {
    // Create a sorted copy of your stories array
    const sortedStories = [...this.stories].sort((a, b) => {
      // Example 1: Sort by a custom 'displayOrder' property on your items
      return a.displayOrder - b.displayOrder;
      
      // Example 2: Hardcode a specific ID sequence
      // const desiredOrder = [5, 2, 7, 1, 3, 6];
      // return desiredOrder.indexOf(a.id) - desiredOrder.indexOf(b.id);
    });
    return this.$_.chunk(sortedStories, 3);
  },
}

Pick the solution that matches your target layout—if you can share more details about what your ideal display should look like, we can refine this further!

内容的提问来源于stack exchange，提问作者Ronaldo