技術標籤：前端

新建一個vue檔案copy進去就可以看到效果，想要實現拖動的時候 請求介面 或者判斷能否拖動等，請參考element tree元件

<template>
  <div id='draggableTable'>

    <!-- 表頭 -->
    <div class="drat-header">

      <div class="drat-item-header"
        :class='{"drat-name-header": item.label == "名稱"}'
 

        :style='{"float": item.label != "名稱" ? "right" : ""}'
        v-for='item in headerList' :key='item.id'>
        {{item.label}}
      </div>
    </div>

    <el-tree
      :data="tableData"
      node-key="id"
      default
 
-expand-all
      icon-class='el-icon-arrow-right'
      :allow-drop='allowDrop'
      draggable>

      <div class='drat-body' slot-scope="{ node, data }">

        <div class="drat-name drat-val-body">
          {{data.name}}
        </div>

        <div class
 
="drat-val-right">
          <div class="drat-val-body" style='float: left;'>
            {{data.code}}
          </div>

          <div class="drat-val-body" style='float: left;'>
            {{data.time}}
          </div>

          <div class="drat-val-body" style='float: left;'>
            {{data.status}}
          </div>

          <div class="drat-val-body" style='float: left;'>
            {{data.operation}}
          </div>
        </div>

      </div>

    </el-tree>

  </div>
</template>

<script>
export default {
  name: 'draggableTable',

  methods: {

    allowDrop (draggingNode, dropNode, type) {
      return type != 'inner'
    }
  },

  data () {
    return {
      headerList: [],
      tableData: []
    }
  },

  created () {

    this.tableData = [
      {
        id: Math.random(),
        name: '小明',
        code: '10001',
        time: '2021-2-10',
        status: '停用',
        children: [
          {
            id: Math.random(),
            name: '小紅1',
            code: '10001',
            time: '2021-2-10',
            status: '停用',
          },
          {
            id: Math.random(),
            name: '小紅2',
            code: '10001',
            time: '2021-2-10',
            status: '停用',
          }
        ]
      },
      {
        id: Math.random(),
        name: '小明2',
        code: '10001',
        time: '2021-2-10',
        status: '停用',
        children: [
          {
            id: Math.random(),
            name: '小紅1',
            code: '10001',
            time: '2021-2-10',
            status: '停用',
          },
          {
            id: Math.random(),
            name: '小紅2',
            code: '10001',
            time: '2021-2-10',
            status: '停用',
          }
        ]
      },
      {
        id: Math.random(),
        name: '小明3',
        code: '10001',
        time: '2021-2-10',
        status: '停用',
        children: [
          {
            id: Math.random(),
            name: '小紅1',
            code: '10001',
            time: '2021-2-10',
            status: '停用',
          },
          {
            id: Math.random(),
            name: '小紅2',
            code: '10001',
            time: '2021-2-10',
            status: '停用',
            children: [
              {
                id: Math.random(),
                name: '小強3',
                code: '10001',
                time: '2021-2-10',
                status: '停用',
              },
              {
                id: Math.random(),
                name: '小強3',
                code: '10001',
                time: '2021-2-10',
                status: '停用',
              },
            ]
          },
          {
            id: Math.random(),
            name: '小紅3',
            code: '10001',
            time: '2021-2-10',
            status: '停用',
          },
        ]
      },
    ]

    this.headerList = [
      {
        id: Math.random(),
        label: '名稱'
      },
      {
        id: Math.random(),
        label: '編碼',
      },
      {
        id: Math.random(),
        label: '記錄時間',
      },
      {
        id: Math.random(),
        label: '狀態',
      },
      {
        id: Math.random(),
        label: '操作',
      }
    ]
  }
}
</script>

<style lang='less' scoped>
#draggableTable {
  width: 100%;
  height: calc(100% - 110px);
  padding: 20px 20px 0 20px;
  font-size: 14px;

  /deep/ .el-tree {

    .drat-body {
      display: flex;
      justify-content: space-between;
      width: 100%;

      .drat-val-right {
        width: 800px;
      }

      .drat-val-body {
        width: 200px;
      }
    }
    
    .el-tree-node__content {
      padding: 20px 0;
      border-bottom: 1px solid #eee;
      &:hover {
        background-color: #ecf5ff;
      }
    }

    .is-current > .el-tree-node__content {
      background-color: #ecf5ff;
    }
  }

  .drat-header {
    display: flex;
    color: #606266;
    font-weight: 600;
    border-bottom: 1px solid #dcdee3;
    padding: 0 0 10px 24px;

    .drat-item-header {
      width: 200px;
    }

    .drat-name-header {
      width: calc(100% - 800px);
    }
  }
}
</style>