项目使用到的插件：Jquery、vuedraggable

npm i jquery
npm i vuedraggable

Vue.vuedraggable 的参考链接：https://www.itxst.com/vue-draggable/tutorial.html

效果图：

代码中关于el-table样式的问题：我没有找到很好的办法使用el-table标签渲染网页，使用是从渲染好的网页上复制下来的结果，再把数据的地方换成vuedraggable组件。

完整代码：

<template>
  <div style="border: 1px solid red;width: 1200px;height: 1000px;display: flex;justify-content: space-between">
    <div>

      <el-tree
          :data="data"
          :expand-on-click-node="false"
          default-expand-all
          node-key="id"
      >

<!--    isLeaf：判断是否最后一个节点    -->
      <span slot-scope="{ node, data }" class="custom-tree-node"   :class="node.isLeaf ? 'leaf' : ''"  >
        <span>{{ node.label }}   <el-button v-if="node.isLeaf" size="mini" type="primary" @click="order(data.file)">排序</el-button> </span>

        <draggable v-if="node.isLeaf"  style="min-height: 5px;border: 1px #2c3e50 solid" :list="data.file" v-model="data.file" elment="div" group="people" @start="drag=true" @end="drag=false">
          <div v-for="i in data.file">
            <span>{{i.date}}</span>
          </div>

        </draggable>
      </span>
      </el-tree>
    </div>


    <div>
    <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" style="width: 100%;">

      <div class="el-table__header-wrapper">
        <table border="0" cellpadding="0" cellspacing="0" class="el-table__header" >
          <colgroup>
            <col name="el-table_1_column_1" >
            <col name="el-table_1_column_2" >
            <col name="el-table_1_column_3" >
            <col name="el-table_1_column_4" >
            <col name="gutter" width="0">
          </colgroup>
          <thead class="has-gutter">
          <tr class="">
            <th class="el-table_1_column_1     is-leaf el-table__cell" colspan="1" rowspan="1">
              <div class="cell">日期</div>
            </th>
            <th class="el-table_1_column_2     is-leaf el-table__cell" colspan="1" rowspan="1">
              <div class="cell">姓名</div>
            </th>
            <th class="el-table_1_column_3     is-leaf el-table__cell" colspan="1" rowspan="1">
              <div class="cell">地址</div>
            </th>
            <th class="el-table_1_column_4     is-leaf el-table__cell" colspan="1" rowspan="1">
              <div class="cell">排序</div>
            </th>
            <th class="el-table__cell gutter" style="width: 0px; display: none;"></th>
          </tr>
          </thead>
        </table>
      </div>


      <div class="el-table__body-wrapper is-scrolling-none">


        <table border="0" cellpadding="0" cellspacing="0" class="el-table__body" >
          <colgroup>
            <col name="el-table_1_column_1" >
            <col name="el-table_1_column_2" >
            <col name="el-table_1_column_3" >
            <col name="el-table_1_column_4" >
          </colgroup>


          <draggable :list="tableData" v-model="tableData" elment="tbody" group="people" @start="drag=true" @end="drag=false" style="min-height: 20px;min-width: 200px">

            <tr class="el-table__row"  v-for="i in tableData">
              <td class="el-table_1_column_1   el-table__cell" colspan="1" rowspan="1">
                <div class="cell">{{i.date}}</div>
              </td>
              <td class="el-table_1_column_2   el-table__cell" colspan="1" rowspan="1">
                <div class="cell">{{i.name}}</div>
              </td>
              <td class="el-table_1_column_3   el-table__cell" colspan="1" rowspan="1">
                <div class="cell">{{i.address}}</div>
              </td>
              <td class="el-table_1_column_3   el-table__cell" colspan="1" rowspan="1">
                <div class="cell">{{i.order}}</div>
              </td>
            </tr>

          </draggable>

        </table>

      </div>



    </div>
<!--      <draggable v-model="aa" :list="aa" group="people" animation="300" dragClass="dragClass"  ghostClass="ghostClass" chosenClass="chosenClass"  style="border: 1px solid red;width: 500px" @start="drag=true" @end="drag=false">-->
<!--        <div v-for="i in aa">-->
<!--          <span>{{i.date}}</span>-->

<!--        </div>-->
<!--      </draggable>-->


    </div>

  </div>
</template>

<script>
// import Sortable from 'sortablejs'
// import axios from 'axios'
import draggable from 'vuedraggable'
import $ from 'jquery'
export default {
  name: "test6",
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄',
        order: 2
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄',
        order: 4
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        order: 1
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄',
        order:3
      }],
      drag:false,
      data: [
        {
          label: '身份证',
          children: [],
          file:[]
        },
        {
          label: '营业执照',
          children: [],
          file:[]
        },
        {
          label: '协议文本',
          children: [
            {
              label: '详细资料一',
              children: [],
              file:[]
            },
            {
              label: '详细资料二',
              children: [],
              file:[]
            }
          ],
          file:[]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  mounted() {
    $('.el-tree').children('.el-tree-node.is-expanded.is-focusable').each(function () {
      if($(this).children('.el-tree-node__children').children().length>0){
        $(this).children('.el-tree-node__content').css("height","fit-content")
      }
    })

  },
  components: {
    draggable,
  },
  methods: {
    order(data){

      data.sort(function (a,b){return a.order-b.order})

    },

  }
}
</script>

<style scoped>
>>>.el-tree-node__content{
  height: auto;
}
</style>