elementUI + Sortablejs 实现表格拖拽

250 阅读1分钟
<template>
  <div>
    <el-button @click="handleDrag">{{isDisable ? '启用' : '禁用'}}拖动</el-button>
    <template v-for="(item,index) in table">
      <el-table :id="item.tName" row-key="date" :data="item.tableData" style="width: 100%; margin-bottom: 20px;"
        :key="index">
        <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>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
export default {
  data() {
    return {
      sortTableArr: [],
      isDisable: false,
      table: [
        {
          tName: 'table1',
          tableData: [{
            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 弄'
          }]
        },
        {
          tName: 'table2',
          tableData: [{
            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 弄'
          }]
        },
        {
          tName: 'table3',
          tableData: [{
            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 弄'
          }]
        }
      ],

    }
  },
  mounted() {
    this.table.forEach(tItem => {
      let eleNode = document.querySelector(`#${tItem.tName} tbody`)
      console.log(eleNode);
      this.sortTableArr.push(Sortable.create(eleNode, {
        animation: 150,
        disabled: this.isDisable, // 设置初始状态,与动态切换无关
        onEnd: (/**Event*/{ newIndex, oldIndex }) => {
          if (newIndex !== oldIndex) {
            const currRow = tItem.tableData.splice(oldIndex, 1)[0];
            console.log(currRow.date)
            tItem.tableData.splice(newIndex, 0, currRow); //数据互换位置
          }
        },
      }));
    })
  },
  methods: {
    // 拖拽启用与禁用
    handleDrag() {
      console.log('Drag', this.isDisable)
      this.isDisable = !this.isDisable
      this.sortTableArr.forEach(item => {
        let state = item.option("disabled"); // get
        console.log('state', state)
        item.option("disabled", !state); // set
      })

    }
  }
}
</script>