定制iview选择器——全选按钮
2024-10-20 03:40:41
源码下载：https://github.com/littleOneYuan/c_select
本文索引
效果
- 下拉框分为三块：已选列表；全选/取消全选按钮；未选列表；
- 当选中未选列表的某项，该项自动从未选列表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
},
最新文章
- Issue 0：发刊词
- 【Jersey】基于Jersey构建Restful Web应用
- Winform开发框架主界面设计展示
- javascript typeof 和 constructor比较
- FrameWork 建模时查询项的usage
- 【转】CppUnit使用简介
- babun,windows shell
- 使用Netsil监控Kubernetes上的微服务
- ural 1353. Milliard Vasya's Function（背包/递归深搜）
- 微信小程序开发问答《五十四》同步请求授权 & 用户拒绝授权,重新调起授权 ... ...
- dede织梦手机站m文件夹功能基础详解
- sourcetree Authentication failed
- Linux运维40道精华题
- cf797c 栈，字符串
- Rpgmakermv（34） Mog_Event Sensor
- MySQL 数据 导入到 SQL Service
- Codeforces 238 div2 B. Domino Effect
- 【转】总结C++中取成员函数地址的几种方法
- 用JAVA制作微型操作系统4月23日情况
- vue.js数组追加合并与对象追加合并的