commit | author | age
|
9bcb19
|
1 |
<template> |
I |
2 |
<div slot="overlay" class="ant-dropdown-menu s-tool-column ant-dropdown-content"> |
|
3 |
<div class="s-tool-column-header s-tool-column-item"> |
|
4 |
<a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange"> |
|
5 |
列展示 |
|
6 |
</a-checkbox> |
|
7 |
<a @click="reset">重置</a> |
|
8 |
</div> |
|
9 |
<a-divider /> |
|
10 |
<div class="ant-checkbox-group"> |
|
11 |
<div> |
|
12 |
<draggable v-model="columnsSetting" animation="300" @end="emitColumnChange"> |
|
13 |
<div class="s-tool-column-item" v-for="item in columnsSetting" :key="item.title"> |
|
14 |
<div class="s-tool-column-handle" > |
|
15 |
<a-icon type="more"/> |
|
16 |
<a-icon type="more"/> |
|
17 |
</div> |
|
18 |
<a-checkbox v-model="item.checked" @change="onChange">{{ item.title }}</a-checkbox> |
|
19 |
</div> |
|
20 |
</draggable> |
|
21 |
</div> |
|
22 |
</div> |
|
23 |
</div> |
|
24 |
</template> |
|
25 |
|
|
26 |
<script> |
|
27 |
import draggable from 'vuedraggable' |
|
28 |
|
|
29 |
export default { |
|
30 |
props: { |
|
31 |
columns: { |
|
32 |
type: Array, |
|
33 |
default: () => ([]) |
|
34 |
} |
|
35 |
}, |
|
36 |
components: { |
|
37 |
draggable |
|
38 |
}, |
|
39 |
data() { |
|
40 |
return { |
|
41 |
indeterminate: false, |
|
42 |
checkAll: true, |
|
43 |
columnsSetting: [], |
|
44 |
originColumns: [] |
|
45 |
} |
|
46 |
}, |
|
47 |
methods: { |
|
48 |
reset() { |
|
49 |
this.columnsSetting = JSON.parse(JSON.stringify(this.originColumns)) |
|
50 |
this.indeterminate = false |
|
51 |
this.checkAll = true |
|
52 |
this.emitColumnChange() |
|
53 |
}, |
|
54 |
onChange() { |
|
55 |
const checkedList = this.columnsSetting.filter(value => value.checked) |
|
56 |
this.indeterminate = !!checkedList.length && checkedList.length < this.columnsSetting.length |
|
57 |
this.checkAll = checkedList.length === this.columnsSetting.length |
|
58 |
this.emitColumnChange() |
|
59 |
}, |
|
60 |
onCheckAllChange(e) { |
|
61 |
const val = e.target.checked |
|
62 |
Object.assign(this, { |
|
63 |
indeterminate: false, |
|
64 |
checkAll: val, |
|
65 |
columnsSetting: this.columns.map(value => ({ ...value, checked: val })) |
|
66 |
}) |
|
67 |
this.emitColumnChange() |
|
68 |
}, |
|
69 |
emitColumnChange() { |
|
70 |
this.$emit('columnChange', this.columnsSetting) |
|
71 |
} |
|
72 |
}, |
|
73 |
mounted() { |
|
74 |
this.columnsSetting = this.columns.map(value => ({ ...value, checked: true })) |
|
75 |
this.originColumns = JSON.parse(JSON.stringify(this.columnsSetting)) |
|
76 |
} |
|
77 |
} |
|
78 |
</script> |
|
79 |
|
|
80 |
<style lang="less" scoped> |
|
81 |
|
|
82 |
</style> |