element 树结构列表拖拽功能

html

 

<script src="//unpkg.com/sortablejs@1.7.0/Sortable.js"></script>

<script src="//unpkg.com/vue/dist/vue.js"></script>

<link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">

<script src="//unpkg.com/element-ui/lib/index.js"></script>

<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>

 

<div id="app">

<template>

    <el-table

      ref="multipleTable"

      :data="tableData"

    tooltip-effect="dark"

      border

      row-key="id"

      align="left"

      border

      default-expand-all:tree-props="{children: 'children', hasChildren: 'hasChildren'}"

    @selection-change="handleSelectionChange">

    <el-table-column

      type="selection"

      width="55">

    </el-table-column>

     <el-table-column

       v-for="(item, index) in col"

       :key="`col_${index}`"

       :prop="col[index].prop"

       :label="item.label">

     </el-table-column>

  </el-table>

  </div>

</template>

</div>

 

 

js

 

var Main = {

    data() {

      return {

    col: [

        {

          label: '编号',

          prop: 'date'

        },

        {

          label: '姓名',

          prop: 'name'

        },

        {

          label: '地址',

          prop: 'address'

        }

      ],

        tableData: [{

          id: 1,

          date: '1',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          id: 2,

          date: '2',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          id: 3,

          date: '3',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄',

          children: [{

              id: 31,

              date: '3.1',

              name: '王小虎',

              address: '上海市普陀区金沙江路 1519 弄'

            }, {

              id: 32,

              date: '3.2',

              name: '王小虎',

              address: '上海市普陀区金沙江路 1519 弄'

          }]

        }, {

          id: 4,

          date: '4',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }, {

          id: 5,

          date: '5',

          name: '王小虎',

          address: '上海市普陀区金沙江路 1518 弄'

        }],

        multipleSelection: []

      }

    },

    mounted() {

      this.rowDrop()

      this.columnDrop()

    },

    methods: {

      // 行拖拽

      rowDrop() {

        const tbody = document.querySelector('.el-table__body-wrapper tbody')

        const _this = this

        Sortable.create(tbody, {

          onEnd({ newIndex, oldIndex }) {

            const currRow = _this.tableData.splice(oldIndex, 1)[0]

            _this.tableData.splice(newIndex, 0, currRow)

          }

        })

      },

      // 复选框

      toggleSelection(rows) {

        if (rows) {

          rows.forEach(row => {

            this.$refs.multipleTable.toggleRowSelection(row);

          });

        } else {

          this.$refs.multipleTable.clearSelection();

        }

      },

      handleSelectionChange(val) {

        this.multipleSelection = val;

      }

    }

  }

var Ctor = Vue.extend(Main)

new Ctor().$mount('#app')