sortablejsを使用して、vueプロジェクトにドラッグアンドドロップテーブルを実装します

1.最初にsortablejsをインストールします

npm install sortablejs --save

2.はじめに

「sortablejs」からSortableをインポートします。

完全なコードは次のとおりです。

HelloWorld.vue

<template>
  <div class="hello">
    <el-collapse v-model="activeNames">
      <el-collapse-item :name="index" v-for="(item,index) in tableData" :key="index">
        <el-table
          :data="item.orders"
          row-key="ip"
          style="width: 100%">
          <el-table-column
            prop="num"
            label="序号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import Sortable from "sortablejs";
export default {
  name: 'HelloWorld',
  data() {
    return {
      activeNames:[0],
      tableData: [
        {
          lable:'title1',
          orders:[
            {num:1,address:'上海市'},
            {num:2,address:'北京市'},
            {num:3,address:'深圳市'}
          ]
        },
        {
          lable:'title2',
          orders:[
            {num:4,address:'河南省'},
            {num:5,address:'郑州市'},
            {num:6,address:'天安门'},
            {num:7,address:'南京市'}
          ]
        }
      ]
    }
  },
  mounted() {
    // 表格中需要实现行拖动，所以选中tr的父级元素
    const table = document.querySelectorAll('.el-table__body-wrapper tbody')
    console.log(table)
    for(var i=0;i<table.length;i++){
      Sortable.create(table[i], {
        // onEnd({ newIndex, oldIndex }) {
        //   console.log(newIndex, oldIndex)
        //   const targetRow = self.resourceList.splice(oldIndex, 1)[0]
        //   self.resourceList.splice(newIndex, 0, targetRow)
        // }
      })
    }
  },
  methods:{}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>