1、下载依赖 npm install sortablejs,官网地址:Sortable.js中文网
2、下载依赖后在页面中引用,引用可能会出现引用失败,在env.d.ts中添加以下代码
declare module 'sortablejs'
3、完整代码
<template>
<el-table :data="tableData" style="width: 100%">
<template v-for="(item, index) in data">
<el-table-column fixed :prop="item.prop" :label="item.label" v-if="item.isCheck" width="150">
</el-table-column>
</template>
<el-table-column fixed="right" label="Operations" width="120">
<template #default>
<el-button link type="danger" @click="handleClickDig" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog v-model="dialogTableVisible" title="编辑列表">
<el-table class="form_table" :data="data" row-key="row" border>
<el-table-column label="选中" width="120">
<template #default="scope">
<el-checkbox v-model="scope.row.isCheck"></el-checkbox>
</template>
</el-table-column>
<el-table-column label="选中" width="120">
<template #default="scope">
<div> {{ scope.row.label }}</div>
</template>
</el-table-column>
<el-table-column label="拖拽" width="120">
<template #default>
<el-button link type="primary" size="small" >Detail</el-button>
</template>
</el-table-column>
</el-table>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleBtn()">Cancel</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, onMounted, nextTick, watch } from 'vue'
import { ElTable } from 'element-plus'
import Sortable from 'sortablejs'
const dialogTableVisible = ref(false)
const handleClickDig = () => {
dialogTableVisible.value = true
dragSort();
}
const handleBtn = () => {
dialogTableVisible.value = false
nextTick(() => {
localStorage.setItem('data', JSON.stringify(data));
});
location.reload();
}
onMounted(() => {
// return data = JSON.parse(localStorage.getItem('data') || '');
})
let data = [
{ label: "日期", prop: "date", isCheck: 'false' },
{ label: "名字", prop: "name", isCheck: 'false' },
{ label: "住址", prop: "state", isCheck: 'false' },
{ label: "年龄", prop: "city", isCheck: 'false' },
{ label: "性别", prop: "address", isCheck: 'false' },
{ label: "爱好", prop: "zip", isCheck: 'false' },
{ label: "优点", prop: "tag", isCheck: 'false' },
]
const tableData =ref([
{
date: '2016-05-03',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Home',
},
{
date: '2016-05-02',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Office',
},
{
date: '2016-05-04',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Home',
},
{
date: '2016-05-01',
name: 'Tom',
state: 'California',
city: 'Los Angeles',
address: 'No. 189, Grove St, Los Angeles',
zip: 'CA 90036',
tag: 'Office',
},
])
// 表格行拖拽
//行拖拽
const dragSort = () => {
nextTick(() => {
// 首先获取需要拖拽的dom节点
Sortable.create(document.querySelector(".form_table .el-table__body-wrapper tbody"), {
disabled: false,
ghostClass: 'sortable-ghost', //拖拽样式
animation: 150, // 拖拽延时,效果更好看
group: { // 是否开启跨表拖拽
pull: false,
put: false
},
onEnd: (evt: { newIndex: any; oldIndex: any; }) => {
const { newIndex, oldIndex } = evt
data.splice(
newIndex,
0,
data.splice(oldIndex, 1)[0]
);
var newArray = data.slice(0);
nextTick(() => {
data = newArray;
});
console.log(data, 'data')
},
});
//列拖拽
// 首先获取需要拖拽的dom节点
Sortable.create(document.querySelector(".form_table .el-table__header-wrapper tr"), {
disabled: false,
ghostClass: 'sortable-ghost', //拖拽样式
animation: 150, // 拖拽延时,效果更好看
group: { // 是否开启跨表拖拽
pull: false,
put: false
},
onEnd: (evt: { newIndex: any; oldIndex: any; }) => {
const { newIndex, oldIndex } = evt
console.log(oldIndex,'老的')
console.log('新的',newIndex)
data.splice(
newIndex,
0,
data.splice(oldIndex, 1)[0]
);
var newArray = data.slice(0);
nextTick(() => {
data = newArray;
});
console.log(data, 'data')
},
});
});
}
</script>
4、加上 :resizable="false"后,列拖拽取消