123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116 |
- <template>
- <div class="linkMultiSel">
- <div class="leftBox">
-
- <MultiCheckBox :title="title" :listArr='listArr' :curLayerNum='1' @getItemData='getItemData' />
- <MultiCheckBox :title="title" :listArr='listArr' :curLayerNum='2' v-if="listArr2.length>0" />
- <MultiCheckBox :title="title" :listArr='listArr' :curLayerNum='3' v-if="listArr3.length>0"/>
- <MultiCheckBox :title="title" :listArr='listArr' :curLayerNum='4' v-if="listArr4.length>0"/>
- </div>
-
- <div class="rightBox" >
- <div class="title">已选</div>
- <div class="linkMulti_list">
- </div>
- </div>
- </div>
- </template>
- <script>
- import MultiCheckBox from './MultiCheckBox'
- export default {
- props:['title','listArr'],
- components:{
- MultiCheckBox,
- },
- data() {
- return {
- title2:'',
- listArr2:[],
- title3:'',
- listArr3:[],
- title4:'',
- listArr4:[],
- clickKey:0,
- }
- },
- methods: {
- getItemData(val){
- this.clickKey=val.clickObj.dataset.layers;
- let index=val.clickObj.dataset.layers;
- console.log(val,val.clickObj.dataset.layers);
- this.clickKey=val.clickObj.dataset.layers;
- if(index==1){
-
- this.listArr3=[];
- this.title3='';
- this.listArr4=[];
- this.title4='';
- this.listArr2=val.data.children;
- this.title2=val.data.name;
- }else if(index==2){
-
- this.listArr4=[];
- this.title4='';
- this.listArr3=val.data.children;
- this.title3=val.data.name;
- }else if(index==3){
-
- this.listArr4=val.data.children;
- this.title4=val.data.name;
- }
- },
- },
- mounted() {
-
- },
- }
- </script>
- <style lang="scss" scoped>
- .linkMultiSel{
- width: 100%;
- height: 300px;
- display: flex;
- ul,li{
- margin: 0;
- padding: 0;
- list-style: none;
- }
- .leftBox{
- width: 62%;
- margin-right: 3%;
- border: 1px solid #ccc;
- border-radius: 5px;
- }
- .rightBox{
- width: 35%;
- border: 1px solid #ccc;
- border-radius: 5px;
- }
- .title{
- height: 36px;
- line-height: 36px;
- font-size: 14px;
- font-weight: 600;
- border-radius: 5px 5px 0 0;
- background-color: rgb(248,249,250);
- padding: 0 15px;
- border-bottom: 1px solid #ccc;
- }
-
-
- }
- </style>
|