attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 自定义表格

Browse Source
This commit is contained in:
wf 2024-06-03 12:55:19 +08:00
parent 73e8c1e1fe
commit 5765b67c2b
1 changed files with 31 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/views/basic-table/custom-table/custom-table.vue
View File

@ -157,7 +157,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { deepClone } from "@/utils"; import { deepClone } from "@/utils";
// import Sortable from "sortablejs"; import Sortable from "sortablejs";
const formData = reactive({ const formData = reactive({
form: { form: {
serial: "", serial: "",
@ -229,6 +229,8 @@ const columns = ref([
checked: true checked: true
} }
]); ]);
// 将columns深拷贝一份，两份分别用于弹窗展示和列表展示
// 原因：弹窗展示时可以勾选是否渲染，如果弹窗和列表共用一个数据，会导致数据勾选取消后无法复原
const deepColumns = () => { const deepColumns = () => {
columnsShow.value = deepClone(columns.value); columnsShow.value = deepClone(columns.value);
}; };
@ -370,20 +372,34 @@ const onCheckbox = (checked: any, row: any, index: any) => {
}; };
// 气泡窗打开 // 气泡窗打开
const popupVisibleChange = (visible: boolean) => { const popupVisibleChange = (visible: boolean) => {
console.log("文字气泡窗打开？", visible); if (visible) {
// if (visible) { nextTick(() => {
// nextTick(() => { // 获取dom
// const el = document.getElementById("tableSetting") as HTMLElement; const el = document.getElementById("tableSetting") as HTMLElement;
// new Sortable(el, { new Sortable(el, {
// onEnd(e: any) { onEnd(e: any) {
// const { oldIndex, newIndex } = e; // 移动结束后，获得新旧下标，这里不会实际更改原始值
// console.log("移动", oldIndex, newIndex); const { oldIndex, newIndex } = e;
// // exchangeArray(cloneColumns.value, oldIndex, newIndex); console.log("移动",columns.value, columnsShow.value);
// // exchangeArray(showColumns.value, oldIndex, newIndex); // 根据新旧下标更改原始值，更改弹窗columns和列表columns
// } exchangeArray(columns.value, oldIndex, newIndex);
// }); exchangeArray(columnsShow.value, oldIndex, newIndex);
// }); }
// } });
});
}
};
// 位置替换
const exchangeArray = (columns: Array<any>, oldIndex: number, newIndex: number) => {
// 保存要交换的元素
let temp = columns[newIndex];
// 将newIndex处的元素移动到oldIndex处
columns[newIndex] = columns[oldIndex];
// 将保存的元素移动到newIndex处
columns[oldIndex] = temp;
}; };
</script> </script>