Draggable拖拽+Collapse使用（不一样的手风琴）

 插件地址：vuedraggable - npm

npm-Draggable插件：vuedraggable

领导前两天给了一个数据结构，根据根据这个数据结构来构建界面。

效果图

 

现有数据结构

data:[
    {
        name:"推荐",
        tips:'推荐',
        list:[
            {
                img:"asdfasdfasd.jpg"，
                id:"4123",
                desc:"翻盖",
                name:"手机",
            }，
            {
                img:"asdfasdfasd.jpg"，
                id:"4123",
                desc:"翻盖",
                name:"手表",
            }，
            {
                img:"asdfasdfasd.jpg"，
                id:"4123",
                desc:"翻盖",
                name:"背包",
            }
        ]
    }，
    {
        name:"推荐1",
        tips:'推荐1',
        list:[
            {
                img:"asdfasdfasd.jpg"，
                id:"4123",
                desc:"翻盖",
                name:"手机",
            }，
            {
                img:"asdfasdfasd.jpg"，
                id:"4123",
                desc:"翻盖",
                name:"手表",
            }，
            {
                img:"asdfasdfasd.jpg"，
                id:"4123",
                desc:"翻盖",
                name:"背包",
            }
        ]
    }
]

数据大概是这样的，里面的数据就不一一展示了 嘻嘻！！

leader的意思最外层设计成一个手风琴Collapse 的样子，然后打开看见表格

代码

          <draggable
            tag="el-collapse"
            :list="tableData5"
            :component-data="collapseComponentData"
            v-model="activeNames"
          >
            <el-collapse-item
              v-for="(item,index) in tableData5"
              :key="index"
              :name="index"
            >
              <template slot="title">
                <span>{{item.classifyName+'('+item.list.length+')'}}</span>
                <span
                  style="float:right"
                >
                  <el-button
                    type="text"
                    icon="el-icon-edit"
                    @click.native="categoryEdit(index, '', '', '1')"
                    round>编辑</el-button>
                  <el-button
                    type="text"
                    style="color:red"
                    icon="el-icon-delete"
                    @click.native="categoryDel(index)"
                    round>删除</el-button>
                </span>
              </template>
              <el-button
              type="primary"
              round
              @click="(target,
                  targetIndex) => batchAddFun(index)"
              icon="el-icon-edit">新增产品</el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="(target,
                  targetIndex) => batchDelFun(index)"
                round>批量删除</el-button>
              <el-button
                type="primary"
                round
                icon="el-icon-edit"
                @click="(target,
                  targetIndex) => batchEditFun(index)"
                >
                批量编辑</el-button>
                //!在这个地方书写展开展示的你内容
            </el-collapse-item>
          </draggable>

 这是最外层的手风琴collapse 自己自由设置每一行的内容

elementUi的collapse 这个相信大家都很熟悉怎么使用

 简单过下

<template slot="title">
   <span>{{item.classifyName+'('+item.list.length+')'}}</span>
   <span
     style="float:right"
    >
      <el-button
        type="text"
        icon="el-icon-edit"
        @click.native="categoryEdit(index, '', '', '1')"
        round>编辑</el-button>
      <el-button
        type="text"
        style="color:red"
        icon="el-icon-delete"
        @click.native="categoryDel(index)"
        round>删除</el-button>
     </span>
</template>

 直接使用插槽修改

拖拽的表格直接书写在上面提示内容的地方就可以

<table class="table table-striped">
                <thead class="thead-dark">
                  <tr>
                    <th class="table-th" scope="col">
                      <el-checkbox
                       v-model="item.checked"
                       @change="e => handleCheckAllChange(e, item.list)"
                       :indeterminate="isIndeterminate"></el-checkbox>
                    </th>
                    <th class="table-th" scope="col">图片</th>
                    <th class="table-th" scope="col">名称</th>
                    <th class="table-th" scope="col">描述</th>
                    <th class="table-th" scope="col">展示</th>
                    <th class="table-th" scope="col">程度</th>
                    <th class="table-th" scope="col">操作</th>
                  </tr>
                </thead>
                <draggable v-model="item.list" tag="tbody">
                  <tr v-for="(element,idx) in item.list" :key="idx" class="table-tr">
                    <td class="table-td">
                      <el-checkbox
                        v-model="element.checked"
                        @change="e => handleCheckedCitiesChange(e, element,idx,item.list,index)"
                      ></el-checkbox>
                    </td>
                    <td class="table-td">
                      <img :src="element.img" class="goods-image"/>
                    </td>
                    <td class="table-td">{{ element.goods_name }}</td>
                    <td class="table-td">{{ element.goods_desc }}</td>
                    <td class="table-td">
                      <el-switch
                        v-model="element.show"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        >
                      </el-switch>
                    </td>
                    <td class="table-td">
                      <span>{{element.hotWord}}</span>
                      <el-button
                        type="text"
                        icon="el-icon-edit"
                        @click="categoryEdit(idx, element, index, '2')"
                      ></el-button>
                    </td>
                    <td class="table-td">
                      <el-button
                        type="text"
                        @click="(target,
                        targetIndex) => editFun(element, target, targetIndex)"
                      >编辑</el-button>
                      <el-button type="text" style="color:red" @click="delFun(element,idx,index)">删除</el-button>
                    </td>
                  </tr>
                </draggable>
              </table>

项目业务千变万化 代码也是千变万化，但是使用的方法都是一样的。