table 拖拽移动

表格拖拽 

 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>