当前位置： 首页 > news >正文

table 拖拽移动

news 2025/8/29 10:58:56

表格拖拽 

 Sortable.js中文网|配置

<!-- 教务处  --><template><div class="but"><el-button @click="mergeAndPrintArrays()" type="primary">保存数据</el-button><el-button @click="restoration()" type="primary">数据还原</el-button></div><div class="container"><div class="left"><el-table :data="myArray" row-key="id" ref="table1" id="table1"><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="state" label="前台是否展示" width="90"><template v-slot="scope"><el-switch v-model="scope.row.states" @change="stateChanged(scope.row)" /></template></el-table-column><el-table-column prop="state" label="是否作为搜索条件" width="120"><template v-slot="scope"><el-switch v-model="scope.row.state" @change="stateChanged(scope.row)" /></template></el-table-column></el-table></div><div class="left"><el-table :data="myArray2" row-key="id" ref="table2" id="table2"><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="state" label="前台是否展示" width="90"><template v-slot="scope"><el-switch v-model="scope.row.states" @change="stateChanged(scope.row)" /></template></el-table-column><el-table-column prop="state" label="是否作为搜索条件" width="120"><template v-slot="scope"><el-switch v-model="scope.row.state" @change="stateChanged(scope.row)" /></template></el-table-column></el-table></div><div class="left"><el-table :data="myArray3" row-key="id" ref="table3" id="table3"><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="state" label="前台是否展示" width="90"><template v-slot="scope"><el-switch v-model="scope.row.states" @change="stateChanged(scope.row)" /></template></el-table-column><el-table-column prop="state" label="是否作为搜索条件" width="120"><template v-slot="scope"><el-switch v-model="scope.row.state" @change="stateChanged(scope.row)" /></template></el-table-column></el-table></div><div class="left"><el-table :data="myArray4" row-key="id" ref="table4" id="table4"><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="state" label="前台是否展示" width="90"><template v-slot="scope"><el-switch v-model="scope.row.states" @change="stateChanged(scope.row)" /></template></el-table-column><el-table-column prop="state" label="是否作为搜索条件" width="120"><template v-slot="scope"><el-switch v-model="scope.row.state" @change="stateChanged(scope.row)" /></template></el-table-column></el-table></div><div class="left"><el-table :data="myArray5" row-key="id" ref="table5" id="table5"><el-table-column prop="name" label="姓名"></el-table-column><el-table-column prop="state" label="前台是否展示" width="90"><template v-slot="scope"><el-switch v-model="scope.row.states" @change="stateChanged(scope.row)" /></template></el-table-column><el-table-column prop="state" label="是否作为搜索条件" width="120"><template v-slot="scope"><el-switch v-model="scope.row.state" @change="stateChanged(scope.row)" /></template></el-table-column></el-table></div></div></template><script>
import Sortable from "sortablejs";
import webfield from "@/api/sys/webfield";
import notifyService from "@/api/notify/notifyService";
export default {data() {return {dataList: [],earchVisible: true,loading: false,myArray: [],myArray2: [],myArray3: [],myArray4: [],myArray5: [],userName: "",userNameF: "",companyDTO: '',ids: '',newtype: ''};},props: ["value1"],mounted() {this.refreshList();},async created() {var userInfo = this.$TOOL.data.get("USER_INFO");this.userName = userInfo.id;this.companyDTO = userInfo.companyDTO.id;},methods: {// 获取数据 初始化refreshList() {// this.newtype = JSON.parse(this.value1)// console.log(this.newtype, 'new11')this.loading = true;const params = {officeId: this.companyDTO,type: 1,};webfield.webfieldinit(params).then((data) => {this.dataList = JSON.parse(data.data.content)this.ids = data.data.idconsole.log(data, "disa")this.assignDataToArrays();this.loading = false;}).catch((error) => {console.error('Error fetching data:', error);this.loading = false;});},// 获取数据 平均分配assignDataToArrays() {this.myArray = [];this.myArray2 = [];this.myArray3 = [];this.myArray4 = [];this.myArray5 = [];// 计算每个数组应该分配的数据量const chunkSize = Math.ceil(this.dataList.length / 5);// 将 dataList 的数据平均分配到五个数组中for (let i = 0; i < this.dataList.length; i++) {if (i < chunkSize) {this.myArray.push(this.dataList[i]);} else if (i < chunkSize * 2) {this.myArray2.push(this.dataList[i]);} else if (i < chunkSize * 3) {this.myArray3.push(this.dataList[i]);} else if (i < chunkSize * 4) {this.myArray4.push(this.dataList[i]);} else {this.myArray5.push(this.dataList[i]);}}this.initSortable();},initSortable() {const initSortableForTable = (tableRef, dataArray, num) => {const tbody = this.$refs[tableRef].$el.querySelector(".el-table__body-wrapper tbody");Sortable.create(tbody, {onEnd: ({ newIndex, oldIndex, to, from, clone, pullMode, item }) => {const totableid = to.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.idconst fromtableid = from.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.id//id映射const tablemap = {table1: this.myArray,table2: this.myArray2,table3: this.myArray3,table4: this.myArray4,table5: this.myArray5,}if (totableid == fromtableid) {const currRow = dataArray.splice(oldIndex, 1)[0];dataArray.splice(newIndex, 0, currRow);} else {//不一致 跨列拖动const currRow = tablemap[fromtableid].splice(oldIndex, 1)[0];// //向to添加一个元素tablemap[totableid].splice(newIndex, 0, currRow);//from table会少一列if (tablemap[totableid][newIndex + 1]) {//如果 to table 的下一行有数据 补充回fromtable的oldindxtablemap[fromtableid].splice(oldIndex, 0, tablemap[totableid][newIndex + 1])//得删除to table的数据tablemap[totableid].splice(newIndex + 1, 1)} else if (tablemap[totableid][newIndex - 1]) {tablemap[fromtableid].splice(oldIndex, 0, tablemap[totableid][newIndex - 1])//得删除to table的数据tablemap[totableid].splice(newIndex - 1, 1)} else {console.error("前后都没有数据 无法补充")}// console.log(this.myArray, this.myArray2)}},group: 'zhaoxin'});};initSortableForTable('table1', this.myArray);initSortableForTable('table2', this.myArray2);initSortableForTable('table3', this.myArray3);initSortableForTable('table4', this.myArray4);initSortableForTable('table5', this.myArray5);},//合并数组  保存数据mergeAndPrintArrays() {// console.log(JSON.parse(this.value1), 'oooooooooooo')// this.newtype = JSON.parse(JSON.stringify(this.options))[0].valuethis.newtype = JSON.parse(this.value1)// 合并三个数组const mergedArray = [...this.myArray, ...this.myArray2, ...this.myArray3, ...this.myArray4, ...this.myArray5];const news = JSON.stringify(mergedArray);this.loading = true;// 构建请求参数对象const params = {officeId: this.companyDTO,type: this.newtype,content: news,operatorId: this.userName,};const newparams = {officeId: this.companyDTO,type: this.newtype,content: news,operatorId: this.userName,id: this.ids};if (this.ids === '') {console.log('空啦')webfield.webfieldadd(params).then((response) => {location.reload(true);this.loading = false;}).catch((error) => {console.error('Error fetching data:', error);this.loading = false;});} else {console.log("不空")console.log(this.myArray, 'cuirow')webfield.webfieldadd(newparams).then((response) => {location.reload(true);this.loading = false;}).catch((error) => {console.error('Error fetching data:', error);this.loading = false;});}},// 控制显隐stateChanged(row) {const index = this.myArray.findIndex(item => item.id === row.id);console.log('Row index:', index);console.log('Row data:', row);},// 还原数据restoration() {this.loading = true;console.log(this.loading, 'loading'); // 修正了拼写错误，从 'loda' 改为 'loading'if (this.ids === '' || this.ids === undefined || this.ids === null) {console.log('kong ')alert('已经还原成最初的原始数据了！');this.loading = false; // 如果不需要刷新页面，可以在这里直接设置 loading 为 false} else {console.log(this.ids, 'konglllll ')webfield.webfielddel(this.ids).then((data) => {console.log(data)this.assignDataToArrays();location.reload(true); // 仅在数据删除成功后刷新页面}).catch((error) => {console.error('Error fetching data:', error);this.loading = false; // 请求失败时设置 loading 为 false});}}},
};
</script><style lang="less" scoped>
.but {margin-bottom: 3rem;
}.container {display: flex;margin-bottom: 50rem;.left,.right {background-color: #fff;width: 282px;height: 1000px;margin: 0 4px;padding: 0 -8px;.item {height: 40px;border: 1px solid #e9e9e9;text-align: center;line-height: 40px;margin: 20px 0;background-color: rgb(242, 242, 242);}}
}
</style>

http://www.lryc.cn/news/546703.html

相关文章：

  • Linux使用笔记：Find Tree 命令
  • 数据结构入门篇——什么是数据结构。
  • MySQL-简介与基本命令
  • 汽车材料耐候性测试仪器-太阳光模拟器介绍
  • 音频3A测试--AEC(回声消除)测试
  • DeepSeek 助力 Vue3 开发：打造丝滑的弹性布局（Flexbox）
  • 六、Redis 高级功能详解：BitMap、HyperLogLog、Geo、Stream
  • WSL下使用git克隆失败解决
  • 【Elasticsearch】索引生命周期管理相关的操作（Index Lifecycle Actions）
  • TS的接口 泛型 自定义类型 在接口中定义一个非必须的属性
  • Collab-Overcooked:专注于多智能体协作的语言模型基准测试平台
  • 未来经济范式争夺战：AR眼镜为何成为下一代交互终端的制高点？
  • Mybatis实现批量添加
  • golang 内存对齐和填充规则
  • 【YashanDB认证】yashandb23.3.1 个人版单机部署安装实践
  • 安全渗透测试的全面解析与实践
  • 通俗易懂的分类算法之决策树详解
  • 【OpenCV C++】以时间命名存图，自动检查存储目录，若不存在自动创建， 按下空格、回车、Q、S自动存图
  • post get 给后端传参数
  • 数据仓库的特点
  • 任务9：交换机基础及配置
  • ArcGIS操作：07 绘制矢量shp面
  • 【AI深度学习基础】NumPy完全指南终极篇：核心功能与工程实践（含完整代码）
  • Golang语法特性总结
  • Java并发编程利器CyclicBarrier：从使用到源码深度解析，掌握多线程同步的艺术
  • 1.从0搭建前端Vue项目工程
  • 3D Web轻量化引擎HOOPS Communicator的核心优势解析：高性能可视化与灵活部署！
  • DeepSeek集成到VScode工具，让编程更高效
  • Excel-to-JSON v2.0.0发布，可以在Excel内部，把Excel表格转换成JSON，嵌套的JSON也能转
  • 深度探索：美团开源DeepSeek R1 INT8量化技术的性能革命