77f7bb95
 梁灏
add Transfer comp...
|
1
2
3
|
<template>
<div :class="prefixCls" :style="style">
<div :class="prefixCls + '-header'">
|
|
122e69ee
梁灏
update Transfer
|
4
5
|
<Checkbox :checked.sync="checkedAll" :disabled="checkedAllDisabled" @on-change="toggleSelectAll"></Checkbox>
<span>{{ title }}</span>
|
|
77f7bb95
梁灏
add Transfer comp...
|
6
7
8
9
10
11
12
13
14
|
<span :class="prefixCls + '-header-count'">{{ count }}</span>
</div>
<div :class="bodyClasses">
<div :class="prefixCls + '-body-search-wrapper'" v-if="filterable">
<Search
:prefix-cls="prefixCls + '-search'"
:query.sync="query"
:placeholder="filterPlaceholder"></Search>
</div>
|
|
37ee1535
梁灏
update Transfer
|
15
|
<ul :class="prefixCls + '-content'">
|
|
77f7bb95
梁灏
add Transfer comp...
|
16
17
18
|
<li
v-for="item in showItems | filterBy filterData"
:class="[prefixCls + '-content-item', {[prefixCls + '-content-item-disabled']: item.disabled}]"
|
|
122e69ee
梁灏
update Transfer
|
19
20
21
22
|
@click.prevent="select(item)">
<Checkbox :checked="isCheck(item)" :disabled="item.disabled"></Checkbox>
<span>{{ showLabel(item) }}</span>
</li>
|
|
37ee1535
梁灏
update Transfer
|
23
|
<li :class="prefixCls + '-content-not-found'">{{ notFoundText }}</li>
|
|
77f7bb95
梁灏
add Transfer comp...
|
24
|
</ul>
|
|
77f7bb95
梁灏
add Transfer comp...
|
25
|
</div>
|
|
dcc06127
梁灏
update Transfer
|
26
|
<div :class="prefixCls + '-footer'" v-if="showFooter" v-el:footer><slot></slot></div>
|
|
77f7bb95
梁灏
add Transfer comp...
|
27
28
29
30
31
32
33
34
|
</div>
</template>
<script>
import Search from './search.vue';
import Checkbox from '../checkbox/checkbox.vue';
export default {
components: { Search, Checkbox },
|
|
77f7bb95
梁灏
add Transfer comp...
|
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
props: {
prefixCls: String,
data: Array,
renderFormat: Function,
checkedKeys: Array,
style: Object,
title: [String, Number],
filterable: Boolean,
filterPlaceholder: String,
filterMethod: Function,
notFoundText: String,
validKeysCount: Number
},
data () {
return {
showItems: [],
|
|
dcc06127
梁灏
update Transfer
|
51
52
|
query: '',
showFooter: true
|
|
77f7bb95
梁灏
add Transfer comp...
|
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
}
},
computed: {
bodyClasses () {
return [
`${this.prefixCls}-body`,
{
[`${this.prefixCls}-body-with-search`]: this.filterable
}
]
},
count () {
const validKeysCount = this.validKeysCount;
return (validKeysCount > 0 ? `${validKeysCount}/` : '') + `${this.data.length}条`;
},
checkedAll () {
return this.data.filter(data => !data.disabled).length === this.validKeysCount && this.validKeysCount !== 0;
},
checkedAllDisabled () {
return this.data.filter(data => !data.disabled).length <= 0;
}
},
methods: {
showLabel (item) {
return this.renderFormat(item);
},
isCheck (item) {
return this.checkedKeys.some(key => key === item.key);
},
select (item) {
if (item.disabled) return;
const index = this.checkedKeys.indexOf(item.key);
index > -1 ? this.checkedKeys.splice(index, 1) : this.checkedKeys.push(item.key);
},
updateFilteredData () {
|
|
122e69ee
梁灏
update Transfer
|
88
|
this.showItems = this.data;
|
|
77f7bb95
梁灏
add Transfer comp...
|
89
90
91
92
93
94
95
96
97
98
99
100
|
},
toggleSelectAll (status) {
this.checkedKeys = status ?
this.data.filter(data => !data.disabled || this.checkedKeys.indexOf(data.key) > -1).map(data => data.key) :
this.data.filter(data => data.disabled && this.checkedKeys.indexOf(data.key) > -1).map(data => data.key);
},
filterData (value) {
return this.filterMethod(value, this.query);
}
},
created () {
this.updateFilteredData();
|
|
dcc06127
梁灏
update Transfer
|
101
102
103
104
|
},
ready () {
this.showFooter = this.$els.footer.innerHTML !== '';
|
|
77f7bb95
梁灏
add Transfer comp...
|
105
106
107
108
109
110
111
112
|
},
watch: {
data () {
this.updateFilteredData();
}
}
}
</script>
|
