vue-表格拖拽

1. el-table结合sortable 参考：https://blog.csdn.net/weixin_42460570/article/details/125765599?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167705787016782427468869%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=167705787016782427468869&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-14-125765599-null-null.142

2. 自己写

<template>

            <div class="content-table tb" align="center">

                    <div class="table-header">

                        <div class="table-header-cell list-checkout" center>

                            <input type="checkbox" name="" id="">

                        </div>

                        <div class="table-header-cell list-id">剧集ID</div>

                        <div class="table-header-cell list-episodes">集数</div>

                        <div class="table-header-cell list-url">剧集</div>

                        <div class="table-header-cell list-episodeName">标题</div>

                        <div class="table-header-cell list-updateTime">更新时间</div>

                        <div class="table-header-cell list-open">收费状态</div>

                        <div class="table-header-cell list-finish">平台状态</div>

                        <div class="table-header-cell list-price">单集收费标准</div>

                        <div class="table-header-cell list-action">操作</div>

                    </div>

                <VueDraggableNext :list="state.list" @start="onStart" @end="onEnd" @change="columnsChangeIndex" handle=".dargDiv" ghost-class="ghostClass" >

                        <div v-for="item in state.list" :key="item.id" :title="item.name" class="table-list">

                            <div class="table-b list-checkout">

                                <el-checkout></el-checkout>

                            </div>

                            <div class="table-b list-id">{{item.id}}</div>

                            <div class="table-b list-episodes">

                                <img src="https://cdn.motieimg.com/book/0009/95357/2.jpg?x-oss-process=style/book_middle" alt="">

                            </div>

                            <div class="table-b list-url">剧集</div>

                            <div class="table-b list-episodeName">标题</div>

                            <div class="table-b list-updateTime">更新时间</div>

                            <div class="table-b list-open">收费状态</div>

                            <div class="table-b list-finish">平台状态</div>

                            <div class="table-b list-price">单集收费标准</div>

                            <div class="table-b list-action dargDiv">

                                <el-button type="primary">移 动</el-button>

                            </div>

                        </div>

                </VueDraggableNext>

            </div>

</template>

<script>

const dragTable = ref();

const sortable = ref(null);

const onStart = (e) => {

    console.log(e, 'onStart');

};

const onEnd = (e) => {

    console.log(e, '结束');

};

const columnsChangeIndex = (e) => {

    console.log(e);

    console.log(state.list);

};

const handleDragAllow = (row: any) => {

    return '';

};

</script>

style

.list-checkout {

            width: 8%;

        }

        .list-id {

            width: 8%;

        }

        .list-episodes {

            width: 15%;

        }

        .list-url {

            width: 8%;

        }

        .list-episodeName {

            width: 8%;

        }

        .list-updateTime {

            width: 8%;

        }

        .list-open {

            width: 8%;

        }

        .list-finish {

            width: 14%;

        }

        .list-price {

            width: 15%;

        }

        .list-action {

            width: 8%;

        }

            .table-list {

                border-bottom: 1px #f5f5f5 solid;

                position: relative;

                .table-b {

                    padding: 8px 0;

                    line-height: 32px;

                    display: inline-block;

                    border-width: 1px;

                    text-align: center;

                    img {

                        width: 100px;

                        height: 135px;

                    }

                }

            }