定制iview选择器——全选按钮

 1  1     <Select
 2  2       v-model="s_arr"
 3  3       :disabled="isdisabled"
 4  4       :placeholder="placeholder"
 5  5       :max-tag-count="0"
 6  6       multiple
 7  7       filterable
 8  8       label-in-value
 9  9       @on-select="selectOption"
10 10       @on-open-change="openChange"
11 11     >
12 12       <Option
13 13         v-for="i in selectedList"
14 14         :value="i.value"
15 15         :key="i.value"
16 16         :title="i.label"
17 17         >{{ i.label }}</Option
18 18       >
19 19       <Option
20 20         value="all"
21 21         key="all"
22 22         v-if="trans_unselList.length > 0"
23 23         style="padding: 0px"
24 24       >
25 25         <p
26 26           @click="
27 27             selectAllFun(
28 28               s_arr.length !== unselList.length + selectedList.length
29 29             )
30 30           "
31 31         >
32 32           {{
33 33             s_arr.length !== unselList.length + selectedList.length
34 34               ? "全选"
35 35               : "取消全选"
36 36           }}
37 37         </p>
38 38       </Option>
39 39       <Option
40 40         v-for="item in unselList"
41 41         :value="item.value"
42 42         :key="item.value"
43 43         :title="item.label"
44 44         >{{ item.label }}</Option
45 45       >
46 46     </Select>

 1 props: {
 2     placeholder: {
 3       type: String,
 4       default () {
 5         return ‘‘
 6       }
 7     },
 8     trans_unselList: {
 9       type: Array,
10       default () {
11         return []
12       }
13     },
14     isdisabled: {
15       type: Boolean,
16       default () {
17         return false
18       }
19     },
20     trans_selList: {
21       type: Array,
22       default () {
23         return []
24       }
25     }
26   },

  1 methods: {
  2     selectAllFun (isAll) {
  3       const self = this
  4       setTimeout(() => {
  5         self.s_arr = []
  6         if (isAll) {
  7           self.selectedList = []
  8           self.init_list.forEach(item => {
  9             // 采用这种方式的拷贝，不会只是拷贝了对象的别名（只拷贝别名会导致不期望的被改动）
 10             self.selectedList.push(item)
 11           })
 12           self.unselList = []
 13           self.allList.forEach(item => {
 14             self.s_arr.push(item)
 15           })
 16         } else {
 17           self.selectedList = []
 18           self.unselList = []
 19           self.init_list.forEach(item => {
 20             self.unselList.push(item)
 21           })
 22           self.s_arr = []
 23         }
 24       }, 0)
 25     },
 26     add_or_del (o) {
 27       const self = this
 28       try {
 29         self.selectedList.forEach(function (item) {
 30           if (item.value === o.value) {
 31             self.add_tag = false
 32             throw new Error(‘‘)
 33           }
 34         })
 35       } catch (e) {
 36         return ‘‘
 37       }
 38       self.add_tag = true
 39       return ‘‘
 40     },
 41     selectOption (o) {
 42       const self = this
 43       if (o.value !== ‘all‘) {
 44         setTimeout(() => {
 45           self.add_or_del(o)
 46           if (self.add_tag) {
 47             try {
 48               self.unselList.forEach(function (item, index) {
 49                 if (item.value === o.value) {
 50                   self.unselList.splice(index, 1)
 51                   throw new Error(‘‘)
 52                 }
 53               })
 54             } catch (e) {
 55               // console.log(e)
 56             }
 57             self.selectedList.push(o)
 58           } else {
 59             try {
 60               self.selectedList.forEach(function (item, index) {
 61                 if (item.value === o.value) {
 62                   self.selectedList.splice(index, 1)
 63                   throw new Error(‘‘)
 64                 }
 65               })
 66             } catch (e) {
 67               // console.log(e)
 68             }
 69             self.unselList.push(o)
 70           }
 71         }, 100)
 72       }
 73     },
 74     openChange (isopen) {
 75       if (!isopen) {
 76         var res = this.backList_handle(this.selectedList)
 77         this.$emit(‘func‘, res)
 78       }
 79     },
 80     // 返回选项列表处理
 81     backList_handle (list) {
 82       var res = []
 83       list.forEach(item => {
 84         res.push(item.value)
 85       })
 86       return res
 87     },
 88     allList_setValue () {
 89       const self = this
 90       self.unselList.forEach(temp => {
 91         self.allList.push(temp.value)
 92         self.init_list.push(temp)
 93       })
 94     },
 95     // 拿到的选项处理
 96     selList_handle (trans, unsel) {
 97       const self = this
 98       setTimeout(() => {
 99         if (trans && trans.length > 0) {
100           const sel = []
101           const un_sel = []
102           unsel.forEach(function (item, index) {
103             if (item.value && trans.indexOf(item.value) !== -1) {
104               sel.push(item)
105             } else if (item.value && trans.indexOf(item.value) === -1) {
106               un_sel.push(item)
107             }
108           })
109           self.selectedList = sel
110           // s_arr保存的仅是value
111           self.selectedList.forEach(item => {
112             self.s_arr.push(item.value)
113           })
114           self.unselList = un_sel
115           const res = this.backList_handle(self.selectedList)
116           this.$emit(‘func‘, res)
117         } else if (trans && trans.length === 0) {
118           self.selectedList = []
119           self.unselList = []
120           self.init_list.forEach(item => {
121             self.unselList.push(item)
122           })
123           self.s_arr = []
124           const res = this.backList_handle(self.selectedList)
125           this.$emit(‘func‘, res)
126         }
127       }, 0)
128     }
129   },