<template>
|
<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>
|
<div style="cursor: pointer" :style="{color:$store.state.settings.theme}" @click="resetColumn">重置</div>
|
</div>
|
<el-checkbox-group v-model="checkedList">
|
<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" />
|
</div>
|
<div>
|
<el-tooltip class="item" effect="dark" content="固定到左侧" placement="bottom">
|
<i
|
style="transform:rotate(90deg);cursor:pointer;"
|
class="el-icon-download"
|
@click="fixedToLeft(item.name)"
|
/>
|
</el-tooltip>
|
<el-divider direction="vertical" />
|
<el-tooltip class="item" effect="dark" content="固定到右侧" placement="bottom">
|
<i
|
style="transform:rotate(-90deg);cursor:pointer"
|
class="el-icon-download"
|
@click="fixedToRight(item.name)"
|
/>
|
</el-tooltip>
|
</div>
|
</div>
|
</draggable>
|
</el-checkbox-group>
|
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
import draggable from 'vuedraggable'
|
|
export default {
|
name: 'DndList',
|
components: { draggable },
|
props: {
|
list1: {
|
type: Array,
|
default() {
|
return []
|
}
|
}
|
},
|
data() {
|
return {
|
checkedList: ['楼李俊2'],
|
checkedAll: true
|
}
|
},
|
methods: {
|
setData(dataTransfer) {
|
// to avoid Firefox bug
|
// Detail see : https://github.com/RubaXa/Sortable/issues/1012
|
dataTransfer.setData('Text', '')
|
},
|
resetColumn() {
|
console.log('resetColumn')
|
},
|
checkedAllClick() {
|
console.log('checkedAllClick')
|
},
|
fixedToLeft(val) {
|
console.log('fixedToLeft', val)
|
},
|
fixedToRight(val) {
|
console.log('fixedToRight', val)
|
},
|
draggableEnded({ to, from, item, clone, oldIndex, newIndex }) {
|
console.log(to, from, item, clone, oldIndex, newIndex)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.dndList {
|
background: #fff;
|
padding-bottom: 40px;
|
|
&:after {
|
content: "";
|
display: table;
|
clear: both;
|
}
|
|
.dndList-list {
|
float: left;
|
padding-bottom: 30px;
|
|
&:first-of-type {
|
margin-right: 2%;
|
}
|
|
.dragArea {
|
margin-top: 15px;
|
min-height: 50px;
|
padding-bottom: 30px;
|
}
|
}
|
}
|
|
.list-complete-item {
|
cursor: pointer;
|
position: relative;
|
font-size: 14px;
|
padding: 5px 5px;
|
margin-top: 4px;
|
//border: 1px solid #bfcbd9;
|
transition: all 1s;
|
display: flex;
|
justify-content: space-between;
|
}
|
|
.list-complete-item-handle {
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
margin-right: 50px;
|
}
|
|
.list-complete-item.sortable-chosen {
|
background: #b0e2f6;
|
}
|
|
.list-complete-item.sortable-ghost {
|
background: #e6f7ff;
|
}
|
|
.list-complete-enter,
|
.list-complete-leave-active {
|
opacity: 0;
|
}
|
</style>
|
