直接上代码:
<!--
* @Company: wwww.glaway.com
* @Copyright: (c) 2020. All Rights Reserved
* @Author: zq
* @Date: 2020-10-30 17:14:37
* @Description:
* @LastEditors: zq
* @LastEditTime: 2020-11-03 14:42:09
-->
<template>
<div>
<div class="table-container">
<table border="1" cellspacing="0" class="table-parent" ref="xTable">
<thead>
<tr class="trtr">
<th v-for="(item, index) in col" :key="index">{{ item.label }}</th>
</tr>
</thead>
<div class="body">
<tbody class="bodybody">
<tr v-for="(item, index) in tableData" :key="index">
<td>
<i class="el-icon-menu drag-btn"></i>
</td>
<td v-for="(m, i) in dropCol" :key="i">{{ item[m.prop] }}</td>
</tr>
</tbody>
</div>
</table>
</div>
</div>
</template>
<script>
import Sortable from "sortablejs";
export default {
data() {
return {
tableData: [
{
date: "2016",
name: "王小虎",
address: "上海市"
},
{
date: "2017",
name: "王小虎",
address: "上海市普"
},
{
date: "2018",
name: "王小虎",
address: "上海市普陀"
},
{
date: "2019",
name: "王小虎",
address: "上海市普陀区"
},
{
date: "2020",
name: "王小虎",
address: "上海市普陀区金"
},
{
date: "2019",
name: "王小虎",
address: "上海市普陀区金沙"
},
{
date: "2013",
name: "王小虎",
address: "上海市普陀区金沙江"
},
{
date: "2014",
name: "王小虎",
address: "上海市普陀区金沙江路"
},
{
date: "2015",
name: "王小虎",
address: "上海市普陀区金沙江路 1"
}
],
col: [
{
label: "日期",
prop: "date"
},
{
label: "姓名",
prop: "name"
},
{
label: "地址",
prop: "address"
}
],
dropCol: [
{
label: "日期",
prop: "date"
},
{
label: "姓名",
prop: "name"
},
{
label: "地址",
prop: "address"
}
]
};
},
methods: {
// 列拖动
columnDrop() {
const wrapperTr = document.getElementsByClassName("trtr")[0];
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
onEnd: ({ newIndex, oldIndex }) => {
console.log(evt.oldIndex, evt.newIndex);
const oldItem = this.dropCol[oldIndex];
this.dropCol.splice(oldIndex, 1);
this.dropCol.splice(newIndex, 0, oldItem);
}
});
},
// 行拖动
rowDrop() {
this.$nextTick(() => {
let xTable = this.$refs.xTable;
this.sortable = Sortable.create(
document.getElementsByClassName("bodybody")[0],
{
handle: ".drag-btn",
onEnd: ({ newIndex, oldIndex }) => {
this.tableData.splice(
newIndex,
0,
this.tableData.splice(oldIndex, 1)[0]
);
var newArray = this.tableData.slice(0);
this.tableData = [];
this.$nextTick(function() {
this.tableData = newArray;
console.log(this.tableData);
});
}
}
);
});
}
},
mounted() {
getDataByPartNum("AL1.100.001", "A.124", "").then(res => {
// 重置一下
this.tableData = [];
this.col = [];
this.dropCol = [];
this.tableData = JSON.parse(res.data.obj);
let newArray = [];
for (let i in this.tableData[0]) {
newArray.push({ label: i, prop: i });
}
this.col = newArray;
this.dropCol = JSON.parse(JSON.stringify(newArray));
});
this.columnDrop();
this.rowDrop();
}
};
</script>
<style lang="scss" scoped>
.table-container {
width: 100%;
height: 500px;
overflow-x: auto;
overflow-y: hidden;
.table-parent {
height: 500px;
box-sizing: border-box;
thead {
background-color: #eee;
tr {
display: flex;
height: 50px;
float: left;
margin-left: 258px;
th {
background-color: #eee;
line-height: 50px;
width: 200px;
height: 50px;
border: 1px solid #ccc;
border-top: none;
border-bottom: none;
}
}
}
.body {
height: 100%;
overflow-y: auto;
tbody {
height: 200px;
overflow: auto;
tr {
display: flex;
td {
text-align: center;
width: 200px;
height: 50px;
line-height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
td:nth-child(1) {
width: 50px;
}
}
}
}
// ::-webkit-scrollbar {
// width: 0px;
// }
}
}
</style>
效果图: