other / mew-iview

Blame view

src/components/transfer/list.vue 3.97 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
26
27
28
29
30
31
32
33
34
35
36
 
          </div>
          <div :class="prefixCls + '-footer'">
              <slot></slot>
          </div>
      </div>
  </template>
  <script>
      import Search from './search.vue';
      import Checkbox from '../checkbox/checkbox.vue';
  
      export default {
          components: { Search, Checkbox },
77f7bb95   梁灏   add Transfer comp... 
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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
88
 
          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: [],
                  query: ''
              }
          },
          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 
89
 
                  this.showItems = this.data;
77f7bb95   梁灏   add Transfer comp... 
90
91
92
93
94
95
96
97
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();
          },
          watch: {
              data () {
                  this.updateFilteredData();
              }
          }
      }
  </script>