实现效果
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="./lib/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="./node_modules/sortablejs/Sortable.js"></script>
</head>
<body>
<div id="app">
<el-table ref="table" :data="items" border height="300" row-key="code">
<el-table-column label="索引" type="index" width="50"></el-table-column>
<el-table-column label="字段名" prop="name"></el-table-column>
</el-table>
</div>
<script>
new Vue({
el:'#app',
data () {
return {
items: [
{ name: "单据编号", code: "fOrderNumber" },
{name: "客户", code: "fCustomerName" },
{name: "合同名称", code: "fContractName" },
{name: "创建日期", code: "fCT" },
{name: "大区", code: "fOrderArea" },
{name: "总长度", code: "fTotalLength" },
{name: "销售数量", code: "fTotalNumber" },
{name: "总重量", code: "fTotalWeight" },
{name: "总金额", code: "fTotalPrice" },
{name: "价税合计", code: "fPriceTaxesTotal" },
{ name: "面积", code: "fAcreage" },
{ name: "已出库数量", code: "fOutStockNumber" },
{ name: "订单类型", code: "fOrderType" },
{ name: "备注", code: "fRemark" },
{ name: "单据状态", code: "fOrderStatus" }
],
dragging: null
}
},
mounted(){
this.$nextTick(()=>{
this.init()
})
},
methods:{
init(){
const table = this.$refs.table.$el.querySelector('tbody');
const self = this
Sortable.create(table, {
onEnd({ newIndex, oldIndex }) {
const targetRow = self.items.splice(oldIndex, 1)[0]
self.items.splice(newIndex, 0, targetRow)
}
})
},
}
})
</script>
</body>
</html>
