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

源码下载：https://github.com/littleOneYuan/c_select

本文索引

• 效果
• template
• data
• prop
• methods
• watch
• created

效果

• 下拉框分为三块：已选列表；全选/取消全选按钮；未选列表；
• 当选中未选列表的某项，该项自动从未选列表pop去已选列表；
• 当选中已选列表的某项，该项自动从已选列表pop去未选列表；
• 支持关键字搜索，输入框显示已选数目；

template

 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>

Template

data

 1 data () {
 2     return {
 3       unselList: [], // 未选数组
 4       selectedList: [], // 已选数组
 5       s_arr: [], // v-model绑定选项数组
 6       add_tag: true, // 新增选项标记
 7       allList: [], // 全选v-model绑定选项数组
 8       init_list: [] // 全选已选数组
 9     }
10   },

prop

• placeholder：父组件传递的输入提示文字
• trans_unselList：父组件传递的未选列表
• isdisabled：父组件传递的该选择器禁用状态
• trans_selList：父组件传递的已选列表

 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   },

Prop

methods

• selectAllFun：处理全选和取消全选事件，参数isAll判断当前处理的是全选还是取消全选事件
• add_or_del：判断当前是添加选项还是删除选项并对应设置标签add_tag
• selectOption：选择事件，根据add_tag进行对应的删除和添加的处理
• openChange：下拉框展开收起事件，在收起的时候将拿到的选项组合传给父组件
• allList_setValue：在首次拿到未选数组时，保存到allList和init_list中（定义见data）
• selList_handle：处理初始化时从父组件那拿到的已选项

  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   },

watch

• 监听父组件传来的已选列表和未选列表的变化

 1 trans_selList (n, o) {
 2       const trans = n.length === 0 ? [] : atrToNum_handle(n)
 3       this.selectAllFun(false)
 4       this.selList_handle(trans, this.init_list)
 5     },
 6     trans_unselList (n, o) {
 7       if (n && n.length > 0) {
 8         this.unselList = deepCopy(n)
 9         this.allList_setValue()
10       }
11     }

created

• 初始化赋值

created () {
    this.unselList = deepCopy(this.trans_unselList)
    this.allList_setValue()
    setTimeout(() => {
      if (this.trans_selList && this.trans_selList.length > 0) {
        const n = this.trans_selList
        const trans = n.length === 0 ? [] : atrToNum_handle(n)
        this.selectAllFun(false)
        this.selList_handle(trans, this.init_list)
      }
    }, 500)
  }

 在父组件中使用：

1 <Csearch
2         placeholder="渠道组"
3         :trans_unselList="ChannelManageGroup_List"
4         :trans_selList="res_ChannelManageGroup_List"
5         @func="getChannelManageGroup_List"
6       />

import Csearch from '../c-search/index.vue'

 

components: {

    Csearch

  },