element-UI自定义拖拽列表

Question

查询完数据后，可根据拖拆字段的位置，组成不同的列表进行显示，这类功能如何做？

Answer 1

如果您在使用 Element-UI 的自定义拖拽列表时，需要根据拖拽的字段位置，将数据组成不同的列表进行显示，可以通过以下步骤实现：

1. 在获取数据后，将数据按照需要的分组方式进行分类，组成多个列表，存储到一个对象中，每个列表对应一个 key 值，例如：

const data = [
  { id: 1, name: 'Apple', type: 'fruit' },
  { id: 2, name: 'Orange', type: 'fruit' },
  { id: 3, name: 'Carrot', type: 'vegetable' },
  { id: 4, name: 'Spinach', type: 'vegetable' }
];

let groupedData = {};
data.forEach(item => {
  if (groupedData[item.type]) {
    groupedData[item.type].push(item);
  } else {
    groupedData[item.type] = [item];
  }
});

1. 将数据分类后的对象作为列表传递给拖拽组件：

<el-container>
  <el-header>
    <el-row>
      <el-col span="12"><h4>Fruit</h4></el-col>
      <el-col span="12"><h4>Vegetable</h4></el-col>
    </el-row>
  </el-header>
  <el-main>
    <el-row>
      <el-col span="6">
        <draggable v-model="groupedData.fruit" tag="ul">
          <li v-for="item in groupedData.fruit" :key="item.id">{{ item.name }}</li>
        </draggable>
      </el-col>
      <el-col span="6">
        <draggable v-model="groupedData.vegetable" tag="ul">
          <li v-for="item in groupedData.vegetable" :key="item.id">{{ item.name }}</li>
        </draggable>
      </el-col>
    </el-row>
  </el-main>
</el-container>

在上述代码中，我们将数据分类后的对象 groupedData 中的 fruit 和 vegetable 分别传递给了两个拖拽列表。这样，拖拽列表中的每个项都会按照分类进行显示。

注意，这里我们使用了 draggable 组件来实现列表的拖拽效果。draggable 组件是一个第三方组件库 vuedraggable 提供的，需要在使用前进行安装。可以通过 npm 安装 vuedraggable：

npm install vuedraggable

然后在 Vue 项目中引入：

// main.js
import Vue from 'vue';
import draggable from 'vuedraggable';
Vue.component('draggable', draggable);

这样，我们就可以在 Element-UI 的自定义拖拽列表中，根据拖拽字段的位置显示不同的列表了。