最终效果(http://47.98.205.88:3000/mult_group_selection)见下图。实际就是将element三种官方select实例整合起来,同时实现分组+多选+可搜索,此外点击一级分组名可以实现全选/全不选。供有相关需求的开发者参考
准备工作:
除了vue脚手架、element等必要包之外。该项目还用到了linq.js(https://github.com/mihaifm/linq),该工具可以快速从数组中查找所需内容。
npm install --save linq
编辑build/webpack.base.conf.js
module:{
......
//添加
new webpack.ProvidePlugin({
Enumerable: "linq"
})
}
数据源格式:
var selectList = [
{
name:"",//一级名称
CName:"", //二级名称
value:"" //值
},
{name:"",CName:"",value:""},
......
]
实现:
script
data (){
return{
selectModel: [],
multipl