chenhaodong / mew-iview

Blame view

src/components/transfer/list.vue 4.43 KB
Edit Raw Normal View History
77f7bb95   梁灏   add Transfer comp... 
1
 
  <template>
bf0203db   梁灏   update Transfer 
2
 
      <div :class="classes" :style="style">
77f7bb95   梁灏   add Transfer comp... 
3
 
          <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
 
              }
          },
          computed: {
bf0203db   梁灏   update Transfer 
56
57
58
59
60
61
62
63
 
              classes () {
                  return [
                      `${this.prefixCls}`,
                      {
                          [`${this.prefixCls}-with-footer`]: this.showFooter
                      }
                  ]
              },
77f7bb95   梁灏   add Transfer comp... 
64
65
66
67
 
              bodyClasses () {
                  return [
                      `${this.prefixCls}-body`,
                      {
4997bd42   梁灏   update Transfer 
68
69
 
                          [`${this.prefixCls}-body-with-search`]: this.filterable,
                          [`${this.prefixCls}-body-with-footer`]: this.showFooter
77f7bb95   梁灏   add Transfer comp... 
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
 
                      }
                  ]
              },
              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 
97
 
                  this.showItems = this.data;
77f7bb95   梁灏   add Transfer comp... 
98
99
100
101
102
103
104
105
106
107
108
109
 
              },
              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 
110
111
 
  
          },
4997bd42   梁灏   update Transfer 
112
 
          compiled () {
dcc06127   梁灏   update Transfer 
113
 
              this.showFooter = this.$els.footer.innerHTML !== '';
77f7bb95   梁灏   add Transfer comp... 
114
115
116
117
118
119
120
121
 
          },
          watch: {
              data () {
                  this.updateFilteredData();
              }
          }
      }
  </script>