< template> < ! -- 左侧第二个 -- > < div class = "left-second-more" > < div class = "layer-list-wrapper1" > < el- collapse v- model= "activeNames" @change= "handleChange" > < el- collapse- item v- for = "(item,index) in leftSelectMoreArr" : key= "index+1" : name= "item.nameNumber" > < template slot= "title" > < div class = "left-title" > < div class = "left-icon" v- if = "item.textName" > { { item. textName } } < / div> < div class = "left-name" > { { item. name} } ({ { item. numData} } 个)< / div> < / div> < i class = "iconfont" : class = "judgeActive('1')!=-1? 'icon-bofang-copy-copy':'icon-bofang'" > < / i> < / template> < el- checkbox- group v- model= "checkList" @change= "handleCheckedCitiesChange" > < el- checkbox v- for = "(itemVal,indexVal) in item.stationArr" : key= "indexVal+1" : label= "itemVal.stationLabel" > { { itemVal. stationName } } < span : class = "itemVal.stationType==1?'check-handwork':'check-auto'" > { { itemVal. stationType== 1 ? '手工' : "自动" } } < / span> < / el- checkbox> < / el- checkbox- group> < / el- collapse- item> < / el- collapse> < / div> < / div>
< / template> < script>
export default { components : { } , props : { leftSelectMoreArr : { type : Array, default : ( ) => [ ] , } , } , data ( ) { return { checkList : [ ] , activeNames : [ ] , differentData : [ ] , isFlag : false , stationType : "" , numberVal1 : 0 , numberVal2 : 0 , numberVal3 : 0 , } ; } , created ( ) { if ( this . leftSelectMoreArr. length > 0 ) { this . activeNames = [ this . leftSelectMoreArr[ 0 ] . nameNumber] ; if ( this . leftSelectMoreArr[ 0 ] . stationArr. length > 0 ) { this . leftSelectMoreArr[ 0 ] . stationArr. forEach ( ( ele ) => { this . checkList. push ( ele. stationLabel) ; } ) ; this . stationType = this . leftSelectMoreArr[ 0 ] . nameNumber; } } this . $emit ( "getTreeVal" , this . checkList, this . stationType) ; } , watch : { checkList ( newVal, oldVal ) { this . differentData = this . getDifferentData ( newVal, oldVal) ; let length1 = newVal. length; let length2 = oldVal. length; if ( length1 > length2) { this . isFlag = true ; } else { this . isFlag = false ; } } , stationType ( newVal, oldVal ) { } , } , mounted ( ) { } , methods : { handleChange ( val ) { } , handleCheckedCitiesChange ( val ) { this . $emit ( "getTreeVal" , this . checkList, this . stationType) ; } , judgeActive ( data ) { return this . activeNames. indexOf ( data) ; } , getDifferentData ( arr1, arr2 ) { return arr1. concat ( arr2) . filter ( function ( v, i, arr ) { return arr. indexOf ( v) === arr. lastIndexOf ( v) ; } ) ; } , removeDuplicates ( array ) { return [ ... new Set ( array) ] ; } , removeCommonElements ( arr1, arr2 ) { return arr1. filter ( ( item ) => ! arr2. some ( ( otherItem ) => otherItem === item) ) ; } , } ,
} ;
< / script> < style lang= "scss" >
. left- second- more { . layer- list- wrapper1 { height : calc ( 100 % - 22px) ; width : 100 % ; border- radius: 4px; background- color: #fff; margin- top: 10px; display : flex; flex- direction: column; . el- collapse { width : 100 % ; border : 0 ; color : #4b4b4b; . el- collapse- item { margin- bottom: 12px; } . el- collapse- item__header { width : 100 % ; height : 60px; background : #f8f9ff; border- bottom: none; justify- content: space- between; align- items: center; border- radius: 4px; padding : 0 16px; . el- collapse- item__arrow { display : none; } . left- title { display : flex; align- items: center; . left- icon { width : 26px; height : 26px; line- height: 26px; text- align: center; border- radius: 500000px; background : #e1e6f0; color : #303133 ; font- size: 14px; margin- right: 12px; } . left- name { color : #303133 ; font- weight: 700 ; } } . iconfont { font- size: 10px; } } . el- collapse- item__header: hover { background : #3886ff; border- radius: 4px; . left- title { . left- icon { border- radius: 4px; background : #fff; color : #0064ff; } . left- name { color : #fff; font- weight: 700 ; } } . iconfont { color : #fff; } } . is- active { background : #3886ff ! important; border- radius: 4px; . left- title { . left- icon { border- radius: 4px; background : #fff; color : #0064ff; } . left- name { color : #fff; font- weight: 700 ; } } . iconfont { color : #fff; transform : rotate ( 90deg) ; } } . el- collapse- item__content { padding : 2px 16px; border- left: 1px solid #e1e6f0; border- right: 1px solid #e1e6f0; border- bottom: 1px solid #e1e6f0; border- bottom- left- radius: 4px; border- bottom- right- radius: 4px; margin- bottom: 12px; } . el- collapse- item: last- child { . el- collapse- item__wrap { border : 0 ; . el- collapse- item__content { margin- bottom: 0px; } } } } . el- collapse: : - webkit- scrollbar { width : 0px; height : 0 ; } . el- checkbox- group { . el- checkbox { width : 100 % ; display : flex; justify- content: space- between; align- items: center; margin : 16px 0 ; . el- checkbox__input { height : 14px; } . el- checkbox__input. is- checked + . el- checkbox__label { color : #3886ff; } . el- checkbox__label { width : 100 % ; display : flex; align- items: center; padding : 0 ; color : #606266 ; line- height: 14px; margin- left: 12px; img { width : 20px; margin- right: 8px; } . check- handwork { width : 44px; height : 24px; line- height: 24px; text- align: center; display : block; margin- left: auto; border- radius: 4px; background : #3886ff1a; border : 1px solid #3886ff; color : #3886ff; } . check- auto { width : 44px; height : 24px; line- height: 24px; text- align: center; display : block; margin- left: auto; border- radius: 4px; background : #70c4221a; border : 1px solid #70c422; color : #70c422; } } } . el- checkbox: hover{ . el- checkbox__input{ . el- checkbox__inner{ border- color: #3886ff; } } . el- checkbox__label{ color : #3886ff; } } . el- checkbox: last- child { . el- checkbox__label { margin- bottom: 0px; } } } }
} . layer- list- wrapper1: : - webkit- scrollbar { display : none;
}
. el- checkbox { line- height: 27px;
}
< / style>
< leftSelectMore v- if = "leftSelectMoreFlag" : leftSelectMoreArr= "leftSelectMoreArr" @getTreeVal= 'getSingleVal' > < / leftSelectMore> import leftSelectMore from "@/components/leftSelect/leftSelectMore.vue" ; components : { leftSelectMore } ,
data ( ) { return { leftSelectMoreArr : [ { name : "省控断面" , numData : "1" , nameNumber : 1 , stationArr : [ { stationName : "桥1" , stationLabel : 1 , stationType : 1 , } , { stationName : "桥2" , stationLabel : 2 , stationType : 2 , } , ] , } , { name : "市控断面" , numData : "1" , nameNumber : 2 , stationArr : [ { stationName : "桥3" , stationLabel : 3 , stationType : 1 , } , { stationName : "桥4" , stationLabel : 4 , stationType : 2 , } , ] , } , ] , leftSelectMoreFlag : true , }
} ,
methods : { getSingleVal ( val, stationType ) { console. log ( "选中的" ) }
}