vue-表格拖拽
2024-10-20 20:54:55
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;
}
}
}
最新文章
- Cheatsheet: 2016 08.01 ~ 08.31
- fir.im Weekly - 你与优秀源码之间只差一个 Star
- IOS第15天(2,事件处理hitTest练习）
- Python基础篇【第8篇】: Socket编程 (一)
- linux 搭建nginx环境(centos6.5)
- PHP--TP框架----生成验证码的方式
- 设置MySQL开机自动启动的方法
- Home键状态保存运用场景
- web缓存值varnish使用
- DispatcherServlet--Spring的前置控制器作用简介
- 强制IE浏览器或WebBrowser控件使用指定版本显示网页2
- HTML块
- 解决qt5窗口不刷新（测试窗口类型，测试窗口属性）
- Qt之模型/视图（自定义按钮）（重绘QStyleOptionButton）
- Jmeter组件介绍
- 关于wamp服务器文件的配置
- Android常见Crash原因总结（二）
- 解决tomcat中文传输乱码问题
- Android Spinner 设置setOnItemSelectedListener时，竟会默认触发一次事件！
- JavaScript 是如何工作的: 事件循环和异步编程的崛起 + 5个如何更好的使用 async/await 编码的技巧 － 学习笔记