vue+element ui+vuedraggable实现表格内不同格子间标签的拖拽

---

一、效果视频

最近有个需求是实现在表格内上下不同格子间标签的拖拽，然而element ui并没有提供此类api，后面我导入vuedraggable包实现了此需求，效果见视频。

demo视频：

element ui表格内标签拖拽demo

二、代码实现

首先要去下载vuedraggable包

npm i vuedraggable

去package.json文件里看包是否下载成功

下载完成后新建页面

页面完整代码如下：

ps：若要实现表格横向的移动，将代码中的:group="jndex + 1"改为group="a"即可

<template>
  <div class="app-container">
    <el-table
      v-loading="loading"
      :data="tableData"
      :max-height="maxHeight"
      class="small-table"
      border
      style="width: 100%"
    >
      <el-table-column align="center" prop="week_date" min-width="160">
      </el-table-column>
      <el-table-column
        align="center"
        prop="start_date"
        label="日期"
        min-width="160"
      />
      <template v-for="(jtem, jndex) in list">
        <el-table-column align="center" :label="jtem.name" min-width="160">
          <template slot-scope="scope">
            <template v-for="(item, index) in jtem.taskList">
              <template v-if="scope.$index === index">
                <draggable
                  :list="item.ground"
                  class="list-group"
                  animation="500"
                  handle=".el-tag"
                  :group="jndex + 1"
                  @start="dragStart($event, jndex)"
                  @end="dragEnd($event, jndex)"
                >
                  <template v-if="item.ground.length > 0">
                    <div
                      class="list-group-item"
                      v-for="(item2, index2) in item.ground"
                      :key="item2.groundId"
                    >
                      <el-tag style="margin: 5px 0">{{ item2.name }}</el-tag>
                    </div>
                  </template>
                </draggable>
              </template>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable
  },
  data() {
    return {
      loading: false,
      maxHeight: window.innerHeight - 250,
      tableData: [
        {
          start_date: "2019-12-23",
          week_date: "星期一"
        },
        {
          start_date: "2019-12-24",
          week_date: "星期二"
        },
        {
          start_date: "2019-12-25",
          week_date: "星期三"
        },
        {
          start_date: "2019-12-26",
          week_date: "星期四"
        },
        {
          start_date: "2019-12-27",
          week_date: "星期五"
        },
        {
          start_date: "2019-12-28",
          week_date: "星期六"
        },
        {
          start_date: "2019-12-29",
          week_date: "星期日"
        }
      ],
      departmentList: [],
      list: [
        {
          name: "小王",
          taskList: [
            {
              ground: [
                {
                  groundId: 1,
                  name: "John1",
                  no: "1"
                },
                {
                  groundId: 2,
                  name: "heo1",
                  no: "2"
                },
                {
                  groundId: 3,
                  name: "mary1",
                  no: "3"
                }
              ]
            },
            {
              ground: [
                {
                  groundId: 11,
                  name: "John2",
                  no: "4"
                },
                {
                  groundId: 12,
                  name: "heo2",
                  no: "5"
                }
              ]
            },
            {
              ground: [
                {
                  groundId: 21,
                  name: "John3",
                  no: "6"
                }
              ]
            },
            {
              ground: []
            },
            {
              ground: []
            },
            {
              ground: []
            },
            {
              ground: []
            }
          ]
        },
        {
          name: "小lv",
          taskList: [
            {
              ground: [
                {
                  groundId: 150,
                  name: "John1",
                  no: "45"
                },
                {
                  groundId: 250,
                  name: "heo1",
                  no: "55"
                },
                {
                  groundId: 350,
                  name: "mary1",
                  no: "65"
                }
              ]
            },
            {
              ground: [
                {
                  groundId: 1150,
                  name: "John2",
                  no: "75"
                },
                {
                  groundId: 1250,
                  name: "heo2",
                  no: "85"
                }
              ]
            },
            {
              ground: [
                {
                  groundId: 2150,
                  name: "John3",
                  no: "95"
                }
              ]
            },
            {
              ground: []
            },
            {
              ground: []
            },
            {
              ground: []
            },
            {
              ground: []
            }
          ]
        }
      ],
      listNo: []
    };
  },
  methods: {
    dragStart(e, listIndex) {
      this.listNo = [];
      this.list[listIndex].taskList.forEach(item => {
        let array = item.ground.map(item2 => {
          return item2.no;
        });
        this.listNo = [...this.listNo, ...array];
      });
      console.log(this.listNo);
    },
    dragEnd(e, listIndex) {
      this.list[listIndex].taskList.forEach(item => {
        item.ground.forEach(item2 => {
          item2.no = this.listNo.shift();
        });
      });
      console.log(this.list[listIndex].taskList);
    }
  }
};
</script>

<style scoped>
.el-tag {
  cursor: move;
}
</style>

其中dragStart函数是拖拽点击开始时所触发，dragEnd函数是拖拽完后触发