vue：遇到的坑之-----table拖拽（element-ui）

效果如下：

拖拽情况：

1、表格嵌套，子表进行拖拽，不能跨表拖拽，父表不能拖拽，引用了sortable.js插件

以下是嵌套表格拖拽代码：

html：

<template>
  <el-table :data="tableData" style="width: 100%" border @expand-change="expandChange" default-expand-all>
    <el-table-column type="expand" width="45">
      <template slot-scope="scope">
        <el-table :data="scope.row.children" border class="expandTable">
          <el-table-column prop="date" label="日期2" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名2" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址2">
          </el-table-column>
        </el-table>
      </template>
    </el-table-column>
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="address" label="地址">
    </el-table-column>
  </el-table>
</template>

js：

import Sortable from 'sortablejs'
export default {
  data() {
    return {
      arr: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
          children: [{
            date: '2016-05-04',
            name: '1',
            address: '上海市普陀区金沙江路 1517 弄2'
          }, {
            date: '2016-05-04',
            name: '2',
            address: '上海市普陀区金沙江路 1517 弄2'
          }, {
            date: '2016-05-04',
            name: '3',
            address: '上海市普陀区金沙江路 1517 弄2'
          }]
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
          children: [{
            date: '2016-05-04',
            name: '4',
            address: '上海市普陀区金沙江路 1517 弄2'
          }, {
            date: '2016-05-04',
            name: '5',
            address: '上海市普陀区金沙江路 1517 弄2'
          }, {
            date: '2016-05-04',
            name: '6',
            address: '上海市普陀区金沙江路 1517 弄2'
          },
          {
            date: '2016-05-04',
            name: '8',
            address: '上海市普陀区金沙江路 1517 弄2'
          }]
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [{
            date: '2016-05-04',
            name: '9',
            address: '上海市普陀区金沙江路 1517 弄2'
          }, {
            date: '2016-05-04',
            name: '10',
            address: '上海市普陀区金沙江路 1517 弄2'
          }, {
            date: '2016-05-04',
            name: '11',
            address: '上海市普陀区金沙江路 1517 弄2'
          },
          {
            date: '2016-05-04',
            name: '12',
            address: '上海市普陀区金沙江路 1517 弄2'
          }]
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ], // 模拟数据
      tableData: [], //表格数据
      tempTableData: [], // 暂存表格数据
      tbodyList:null, //表格html
    }
  },
  created() {
    this.getTableData()
  },
  mounted() {
    // 拿到所有子表的html，并注册拖拽事件，如果子表不是默认全部展开的话，可以不用写这一步骤
    this.$nextTick(()=>{
      this.tbodyList = document.querySelectorAll('.expandTable .el-table__body-wrapper tbody');
      this.dropTable(this.tbodyList);
    })
  },
  methods: {
    getTableData() {
      // 模拟请求获取表格数据
      //this.$axios(`url`).then(res => {
        this.tableData = this.arr;
        this.tempTableData = this.arr; //存起来，拖拽后进行对比
      //})
    },
    // 表格展开重新渲染
    expandChange() {
      this.$nextTick(() => {
        this.tbodyList = document.querySelectorAll('.expandTable .el-table__body-wrapper tbody');
        this.dropTable( this.tbodyList)
      })
    },

    //行拖拽
    dropTable(tbodyList) {
      let _this = this;
      let tbody = tbodyList;
      console.log(tbody);
      
      for (let i = 0; i < tbody.length; i++) {
        Sortable.create(tbody[i], {
          onEnd({ newIndex, oldIndex }) {
            console.log(11111111);
            
            // 手误拖拽，不执行后面操作
            if (newIndex == oldIndex) return;
            // 重新渲染
            _this.tableData[i]['children'].splice(newIndex, 0, _this.tableData[i]['children'].splice(oldIndex, 1)[0]);
            var newArray = _this.tableData[i]['children'].slice(0);
            _this.tableData[i]['children'] = [];
            _this.$nextTick(function () {
              _this.tableData[i]['children'] = newArray;
              _this.dropTableSendRequest(i);// i 为父表下标
            });
          },
        })
      }
    },

    // 将数据传到后台
    dropTableSendRequest(i) {
      // 找到拖拽子表的父表
      let temparr = this.tempTableData.find((item, index) => {
        if (index == i) {
          return item
        }
      })
      console.log(temparr); 
      // url,data按需传
      //this.axios.post('url', 'data').then(res => {
        this.getTableData();
       // this.$message({
       //  type: res.data.type,
       //  message: res.data.message
       // })
      //})
    }

  }
}

2、单表拖拽 

单表拖拽比较简单，以下是代码

html：

<template>
  <el-table :data="tableData" style="width: 100%" border>
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="180">
    </el-table-column>
    <el-table-column prop="address" label="地址">
    </el-table-column>
  </el-table>
</template>

js：

import Sortable from 'sortablejs'
export default {
  data() {
    return {
      arr: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ], // 模拟数据
      tableData: [], //表格数据
      tempTableData: [], // 暂存表格数据
      tbodyList:null, //表格html
    }
  },
  created() {
    this.getTableData()
  },
  mounted() {
    // 拿到所有子表的html，并注册拖拽事件，如果子表不是默认全部展开的话，可以不用写这一步骤
    this.$nextTick(()=>{
      this.tbodyList = document.querySelectorAll('.expandTable .el-table__body-wrapper tbody');
      this.dropTable(this.tbodyList);
    })
  },
  methods: {
    getTableData() {
      // 模拟请求获取表格数据
      //this.$axios(`url`).then(res => {
        this.tableData = this.arr;
        this.tempTableData = this.arr; //存起来，拖拽后进行对比
      //})
    },

    //行拖拽
    dropTable() {
      tbody = document.querySelector('.el-table__body-wrapper tbody');
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          if (newIndex == oldIndex) return;

          this.tableData.splice(newIndex, 0, this.tableData.splice(oldIndex, 1)[0]);
          var newArray = this.tableData.slice(0);
          this.tableData= [];
          this.$nextTick(function () {
            this.tableData= newArray;
            this.dropTableSendRequest(oldIndex, newIndex)
          });
        }
      })
    },

    // 将数据传到后台
    dropTableSendRequest(oldIndex,newIndex) { 
      // url,data按需传
      //this.axios.post('url', 'data').then(res => {
        this.getTableData();
       // this.$message({
       //  type: res.data.type,
       //  message: res.data.message
       // })
      //})
    }

  }
}

有问题欢迎留言=3=