From 0c6473bcff72275f79cbc14843937ed8b26c6801 Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期三, 04 一月 2023 16:41:03 +0800
Subject: [PATCH] 1.优化列展示功能
---
src/components/DndList/index.vue | 29 ++++++++++++++++++-----------
1 files changed, 18 insertions(+), 11 deletions(-)
diff --git a/src/components/DndList/index.vue b/src/components/DndList/index.vue
index abb23e6..828d0b3 100644
--- a/src/components/DndList/index.vue
+++ b/src/components/DndList/index.vue
@@ -9,7 +9,10 @@
<draggable :set-data="setData" :list="list1" class="dragArea" animation="300" @end="draggableEnded">
<div v-for="item in list1" :key="item.id" class="list-complete-item">
<div style="display: flex">
- <div style="width: 20px;height: 20px;margin-right: 4px;cursor:move"><i class="el-icon-rank" /></div>
+ <div style="width: 20px;height: 20px;margin-right: 4px;cursor:move;"><i
+ style="font-weight: bolder"
+ class="el-icon-rank"
+ /></div>
<el-checkbox :label="item.label" class="list-complete-item-handle" />
</div>
<div>
@@ -58,8 +61,9 @@
data() {
return {
checkedList: this.list1.map(i => i.show ? i.label : '').filter(i => i !== ''), // 鍒楀睍绀哄��
+ checkedListDefault: [...this.list1], // 閲嶇疆榛樿鍊糒ist
checkedListDefaultLabel: this.list1.map(i => i.show ? i.label : '').filter(i => i !== ''), // 閲嶇疆榛樿鍊糽abel
- // checkedListDefaultFixed: this.list1.map(i => i.show ? i.label : '').filter(i => i !== ''), // 閲嶇疆榛樿鍊糵ixed
+ checkedListDefaultFixed: this.list1.map(i => i.fixed), // 閲嶇疆榛樿鍊糵ixed
checkedAll: true
}
},
@@ -76,8 +80,12 @@
// 閲嶇疆
resetColumn() {
this.checkedList = this.checkedListDefaultLabel
+ this.list1.sort((a, b) => a.id - b.id)// 鎺掑簭
this.list1.forEach((i, j) => {
i.show = !!this.checkedListDefaultLabel.includes(i.label)
+ })
+ this.checkedListDefaultFixed.forEach((i, j) => {
+ this.list1[j].fixed = i
})
this.$emit('tableColumnUpdate', this.checkedListDefaultLabel)
},
@@ -96,26 +104,25 @@
},
// 鍥哄畾鍒板乏渚�
fixedToLeft(val) {
- console.log('fixedToLeft', val)
- this.list1.find(i => i.label === val).fixed = this.list1.find(i => i.label === val).fixed !== 'left' ? 'left' : false
+ if (this.list1.find(i => i.label === val).show) {
+ this.list1.find(i => i.label === val).fixed = this.list1.find(i => i.label === val).fixed !== 'left' ? 'left' : false
+ }
this.$emit('tableColumnUpdate', this.checkedList)
},
// 鍥哄畾鍒板彸渚�
fixedToRight(val) {
- console.log('fixedToRight', val)
- this.list1.find(i => i.label === val).fixed = this.list1.find(i => i.label === val).fixed !== 'right' ? 'right' : false
+ if (this.list1.find(i => i.label === val).show) {
+ this.list1.find(i => i.label === val).fixed = this.list1.find(i => i.label === val).fixed !== 'right' ? 'right' : false
+ }
this.$emit('tableColumnUpdate', this.checkedList)
},
// 鎷栧姩缁撴潫浜嬩欢
draggableEnded({ to, from, item, clone, oldIndex, newIndex }) {
- console.log(to, from, item, clone, oldIndex, newIndex)
-
- // console.log(this.list1, 123456789)
+ // console.log(to, from, item, clone, oldIndex, newIndex)
this.$emit('tableColumnUpdate', this.list1, true)// 浼犵粰鐖风埛 isCopyTrue:澶嶅�肩粰鐖风埛
},
// 澶氶�夋鍊兼敼鍙樹簨浠�
checkedListChange(val) {
- console.log(val, 1)
this.checkedAll = val.length !== 0
this.list1.forEach((i, j) => {
i.show = !!val.includes(i.label)
@@ -148,7 +155,7 @@
.dragArea {
margin-top: 15px;
min-height: 50px;
- padding-bottom: 30px;
+ //padding-bottom: 30px;
}
}
}
--
Gitblit v1.9.3