other / mew-iview

Blame view

src/components/transfer/list.vue 4.19 KB
Edit Raw Normal View History
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
 
              }
          },
          computed: {
              bodyClasses () {
                  return [
                      `${this.prefixCls}-body`,
                      {
4997bd42   梁灏   update Transfer 
60
61
 
                          [`${this.prefixCls}-body-with-search`]: this.filterable,
                          [`${this.prefixCls}-body-with-footer`]: this.showFooter
77f7bb95   梁灏   add Transfer comp... 
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
88
 
                      }
                  ]
              },
              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 
89
 
                  this.showItems = this.data;
77f7bb95   梁灏   add Transfer comp... 
90
91
92
93
94
95
96
97
98
99
100
101
 
              },
              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 
102
103
 
  
          },
4997bd42   梁灏   update Transfer 
104
 
          compiled () {
dcc06127   梁灏   update Transfer 
105
 
              this.showFooter = this.$els.footer.innerHTML !== '';
77f7bb95   梁灏   add Transfer comp... 
106
107
108
109
110
111
112
113
 
          },
          watch: {
              data () {
                  this.updateFilteredData();
              }
          }
      }
  </script>