vxe-table 表格拖动上移下移
看官方也可以,例子都差不多。主要注意的是 row-key ref="xTable1":data="tableData"npm isortablejsvue导包:import Sortable from 'sortablejs';<template><vxe-table border row-key ref="xTable1" class="sortable-row-demo" :
·
看官方也可以,例子都差不多。主要注意的是 row-key ref="xTable1" :data="tableData"
npm i sortablejs
vue导包:
import Sortable from 'sortablejs';
<template>
<vxe-table border row-key ref="xTable1" class="sortable-row-demo" :scroll-y="{enabled: false}" :data="tableData">
<vxe-table-column width="60">
<template v-slot>
<span class="drag-btn">
<i class="vxe-icon--menu"></i>
</span>
</template>
<template v-slot:header>
<vxe-tooltip v-model="showHelpTip1" content="按住后可以上下拖动排序!" enterable>
<i class="vxe-icon--question" @click="showHelpTip1 = !showHelpTip1"></i>
</vxe-tooltip>
</template>
</vxe-table-column>
<vxe-table-column field="name" title="Name" fixed="left">
</vxe-table-column>
<vxe-table-column title="Name1">
<vxe-table-column title="Name2">
<vxe-table-column field="sex" title="Sex"></vxe-table-column>
<vxe-table-column field="age" title="Age"></vxe-table-column>
</vxe-table-column>
</vxe-table-column>
<vxe-table-column field="address" title="Address" show-overflow></vxe-table-column>
</vxe-table>
</template>
<script>
import XLSX from 'xlsx';
import Sortable from 'sortablejs';
import {
importExcel,
get,
post
} from '@/api/board/scheduling'
import {
listlineAll
} from "@/api/panasonic/line";
export default {
data() {
return {
showHelpTip1: false,
tableData: [{
id: 10001,
name: 'Test1',
nickname: 'T1',
role: 'Develop',
sex: 'Man',
age: 28,
address: 'Shenzhen'
},
{
id: 10002,
name: 'Test2',
nickname: 'T2',
role: 'Test',
sex: 'Women',
age: 22,
address: 'Guangzhou'
},
{
id: 10003,
name: 'Test3',
nickname: 'T3',
role: 'PM',
sex: 'Man',
age: 32,
address: 'Shanghai'
},
{
id: 10004,
name: 'Test4',
nickname: 'T4',
role: 'Designer',
sex: 'Women ',
age: 23,
address: 'Shenzhen'
},
{
id: 10005,
name: 'Test5',
nickname: 'T5',
role: 'Develop',
sex: 'Women ',
age: 30,
address: 'Shanghai'
}
]
}
},
created() {
this.rowDrop()
},
beforeDestroy() {
if (this.sortable1) {
this.sortable1.destroy()
}
},
methods: {
rowDrop() {
this.$nextTick(() => {
const xTable = this.$refs.xTable1
this.sortable1 = Sortable.create(xTable.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
handle: '.drag-btn',
onEnd: ({
newIndex,
oldIndex
}) => {
const currRow = this.tableData.splice(oldIndex, 1)[0]
this.tableData.splice(newIndex, 0, currRow)
}
})
})
}
}
}
</script>
<style lang="scss" scoped>
.do-color {
&:hover {
color: #1296DB;
}
}
</style>
效果图【图片为实际业务中,上面是伪代码】:
更多推荐
已为社区贡献1条内容
所有评论(0)