vue表格单元格数据拖拽互换_vue拖拽表格互换-CSDN博客

帮助兄弟记录下成果，借鉴了https://juejin.cn/post/6844904136056668168

兄弟重写了原生底层，可以直接从下面两个链接参考下载。

很简陋的示例：http://doc.alwaysmissly.com/flexi-table/

NPM仓库地址：https://www.npmjs.com/package/@flexi-table/swapper

比较懒的，可以直接看下面的代码。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>计划表-支持拖拽</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <style>
      .container {
        padding: 0 30px;
        background: #f1eded;
        height: 500px;
        padding-top: 30px;
      }
      .filtered {
        background-color: #f9f9f9;
      }
    </style>
  </head>
  <body>
    <div id="app" class="container">
      <h1>计划表-支持拖拽</h1>
      <el-table class="drag-table" :data="schedule" border :cell-class-name="getCellClassName">
        <el-table-column
          v-for="item in x"
          :key="item.value"
          :prop="item.value"
          :label="item.label"
        ></el-table-column>
      </el-table>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="module">
      import Sortable, {
        MultiDrag,
        Swap
      } from 'https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/modular/sortable.esm.js'
      Sortable.mount(new MultiDrag(), new Swap())

      new Vue({
        el: '#app',
        data() {
          return {
            x: [
              { value: 'time', label: '' },
              { value: 'mon', label: '星期一' },
              { value: 'tue', label: '星期二' },
              { value: 'wed', label: '星期三' },
              { value: 'thu', label: '星期四' },
              { value: 'fri', label: '星期五' },
              { value: 'sat', label: '星期六' },
              { value: 'sun', label: '星期日' }
            ],
            schedule: [
              {
                time: '9:00~10:00',
                mon: '语文',
                tue: '',
                wed: '',
                thu: '',
                fri: '',
                sat: '',
                sun: ''
              },
              {
                time: '10:00~11:00',
                mon: '',
                tue: '英语',
                wed: '',
                thu: '',
                fri: '',
                sat: '',
                sun: ''
              },
              {
                time: '11:00~12:00',
                mon: '',
                tue: '',
                wed: '数学',
                thu: '',
                fri: '化学',
                sat: '',
                sun: ''
              }
            ]
          }
        },
        mounted() {
          this.initDrag()
        },
        methods: {
          getCellClassName({ row, column }) {
            if (!row[column.property]) {
              return 'filtered'
            }
            return ''
          },
          initDrag() {
            const children = document.querySelector(
              '.drag-table .el-table__body-wrapper tbody'
            ).children
            for (let index = 0; index < children.length; index++) {
              const el = children.item(index)
              Sortable.create(el, {
                group: {
                  name: 'shared'
                },
                swap: true,
                filter: '.filtered',
                onEnd: (evt) => {
                  this.updateData({
                    oldRowIndex: evt.from.rowIndex,
                    newRowIndex: evt.to.rowIndex,
                    oldColumnIndex: evt.oldIndex,
                    newColumnIndex: evt.newIndex
                  })
                }
              })
            }
          },
          updateData({ oldRowIndex, newRowIndex, oldColumnIndex, newColumnIndex }) {
            const schedule = JSON.parse(JSON.stringify(this.schedule))
            const OldProperty = this.x[oldColumnIndex].value
            const oldValue = schedule[oldRowIndex][OldProperty]
            const newProperty = this.x[newColumnIndex].value
            const newValue = schedule[newRowIndex][newProperty]
            schedule[newRowIndex][newProperty] = oldValue
            schedule[oldRowIndex][OldProperty] = newValue

            this.schedule = []
            this.$nextTick(() => {
              this.schedule = schedule
              this.$nextTick(() => {
                this.initDrag()
              })
            })
          }
        }
      })
    </script>
  </body>
</html>