[demo] Hope to help

[keepchen]

html(vue element node)

<el-table-draggable 
     handle=".handle" 
     border
    style="width: 100%;min-height:768px;"
    @drop="dragFn()">
    <el-table :data="links" :row-class-name="row">
                   <el-table-column
                         fixed
                         type="index"
                         label="index"
                         width="80">
                    </el-table-column>
                    <el-table-column
                      prop="title"
                      label="title"
                      width="300">
                    </el-table-column>
                    <el-table-column
                      prop="href"
                      label="link"
                      width="800">
                    </el-table-column>
                    <el-table-column
                      prop="target"
                      label="target"
                      width="200">
                    </el-table-column>
                    <el-table-column
                      prop="content"
                      label="content"
                      width="500">
                    </el-table-column>
                    <el-table-column
                      fixed="right"
                      label="operation"
                      width="200">
                      <template slot-scope="scope">
                        <el-button @click="handleEdit(scope.row)" type="primary" icon="el-icon-edit" round size="small" class="each-dragger-row" :data-link-id="scope.row.id">more</el-button>
                        <el-button  type="danger" icon="el-icon-delete" round size="small" @click="handleDelete(scope.row)">delete</el-button>
                      </template>
                    </el-table-column>
                </el-table>
</el-table-draggable>

script

...
import ElTableDraggable from "element-ui-el-table-draggable";
...
export default {
        data(){
            return {
                links:[],
            }
        },
        components:{
            ElTableDraggable
        },
        methods:{
             row({row, rowIndex}) {
                return "handle";
             },
             dragFn() {
                    //todo something
             }
        }
};

table usage

Same usage as element ui table

Big Thanks

This is a great component, thank you very much for its author!

I hope to be helpful to those in need. :smile: