实现场景:
点击表格的编辑,弹出弹窗,可以拖拽表头并且实现选中显示反显在表格表头
第一步:
npm install sortablejs
第二步:
在页面引入sortablejs
import Sortable from "sortablejs";
第三步:
在el-table 绑定一个class类样式。之后再使用sortablejs来写一个拖拽函数
<el-table class="form_table" :data="data" row-key="row">
//行拖拽
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')
},
});
});
}
第四步:
由于是纯前端实现,所以将数据存储在了本地数据里面
const handleBtn = () => {
dialogTableVisible.value = false
nextTick(() => {
localStorage.setItem('data', JSON.stringify(data));
});
location.reload();
}
onMounted(() => {
return data = JSON.parse(localStorage.getItem('data') || '');
})
全部代码
<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">
<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" @click="handleClick">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 Sortable from "sortablejs";
import { reactive, ref, onMounted, nextTick, watch } from 'vue'
import { ElTable } from 'element-plus'
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 = [
{
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')
},
});
});
}
</script>