From ff345ebb3fcece2ebafc3333b895d9481bd9435e Mon Sep 17 00:00:00 2001
From: loulijun2021 <1694218219@qq.com>
Date: 星期三, 04 一月 2023 15:52:56 +0800
Subject: [PATCH] 1.列展示设置 功能基本实现，细节待优化
---
src/components/DndList/index.vue | 69 ++++++++++++++++++++++++++++------
1 files changed, 56 insertions(+), 13 deletions(-)
diff --git a/src/components/DndList/index.vue b/src/components/DndList/index.vue
index 5b95007..abb23e6 100644
--- a/src/components/DndList/index.vue
+++ b/src/components/DndList/index.vue
@@ -2,30 +2,32 @@
<div class="dndList">
<div :style="{width:'100%'}" class="dndList-list">
<div style="display: flex;justify-content: space-between;">
- <el-checkbox v-model="checkedAll" @change="checkedAllClick">鍒楀睍绀�</el-checkbox>
+ <el-checkbox v-model="checkedAll" @change="checkedAllChange">鍒楀睍绀�</el-checkbox>
<div style="cursor: pointer" :style="{color:$store.state.settings.theme}" @click="resetColumn">閲嶇疆</div>
</div>
- <el-checkbox-group v-model="checkedList">
+ <el-checkbox-group v-model="checkedList" @change="checkedListChange">
<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>
- <el-checkbox :label="item.name" class="list-complete-item-handle" />
+ <el-checkbox :label="item.label" class="list-complete-item-handle" />
</div>
<div>
<el-tooltip class="item" effect="dark" content="鍥哄畾鍒板乏渚�" placement="bottom">
<i
- style="transform:rotate(90deg);cursor:pointer;"
+ style="transform:rotate(90deg);cursor:pointer;font-weight: bolder"
class="el-icon-download"
- @click="fixedToLeft(item.name)"
+ :style="{color:item.fixed==='left'?$store.state.settings.theme:''}"
+ @click="fixedToLeft(item.label)"
/>
</el-tooltip>
<el-divider direction="vertical" />
<el-tooltip class="item" effect="dark" content="鍥哄畾鍒板彸渚�" placement="bottom">
<i
- style="transform:rotate(-90deg);cursor:pointer"
+ style="transform:rotate(-90deg);cursor:pointer;font-weight: bolder"
class="el-icon-download"
- @click="fixedToRight(item.name)"
+ :style="{color:item.fixed==='right'?$store.state.settings.theme:''}"
+ @click="fixedToRight(item.label)"
/>
</el-tooltip>
</div>
@@ -51,12 +53,19 @@
return []
}
}
+
},
data() {
return {
- checkedList: ['妤兼潕淇�2'],
+ checkedList: this.list1.map(i => i.show ? i.label : '').filter(i => i !== ''), // 鍒楀睍绀哄��
+ 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
checkedAll: true
}
+ },
+ created() {
+ },
+ mounted() {
},
methods: {
setData(dataTransfer) {
@@ -64,20 +73,54 @@
// Detail see : https://github.com/RubaXa/Sortable/issues/1012
dataTransfer.setData('Text', '')
},
+ // 閲嶇疆
resetColumn() {
- console.log('resetColumn')
+ this.checkedList = this.checkedListDefaultLabel
+ this.list1.forEach((i, j) => {
+ i.show = !!this.checkedListDefaultLabel.includes(i.label)
+ })
+ this.$emit('tableColumnUpdate', this.checkedListDefaultLabel)
},
- checkedAllClick() {
- console.log('checkedAllClick')
+ // 鍒楀睍绀�
+ checkedAllChange() {
+ this.list1.forEach(i => {
+ if (this.checkedAll) {
+ i.show = true
+ this.checkedList = this.list1.map(j => j.label)
+ } else {
+ i.show = false
+ this.checkedList = []
+ }
+ })
+ this.$emit('tableColumnUpdate', this.checkedList)
},
+ // 鍥哄畾鍒板乏渚�
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
+ 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
+ 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)
+ 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)
+ })
+ this.$emit('tableColumnUpdate', val)
}
}
}
@@ -86,7 +129,7 @@
<style lang="scss" scoped>
.dndList {
background: #fff;
- padding-bottom: 40px;
+ //padding-bottom: 40px;
&:after {
content: "";
@@ -96,7 +139,7 @@
.dndList-list {
float: left;
- padding-bottom: 30px;
+ //padding-bottom: 30px;
&:first-of-type {
margin-right: 2%;
--
Gitblit v1.9.3