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;
}
}
}
