linkMultiSelect.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. <template>
  2. <div class="linkMultiSel">
  3. <div class="leftBox">
  4. <MultiCheckBox :title="title" :listArr='listArr' :curLayerNum='1' @getItemData='getItemData' />
  5. <MultiCheckBox :title="title" :listArr='listArr' :curLayerNum='2' v-if="listArr2.length>0" />
  6. <MultiCheckBox :title="title" :listArr='listArr' :curLayerNum='3' v-if="listArr3.length>0"/>
  7. <MultiCheckBox :title="title" :listArr='listArr' :curLayerNum='4' v-if="listArr4.length>0"/>
  8. </div>
  9. <div class="rightBox" >
  10. <div class="title">已选</div>
  11. <div class="linkMulti_list">
  12. </div>
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. import MultiCheckBox from './MultiCheckBox'
  18. export default {
  19. props:['title','listArr'],
  20. components:{
  21. MultiCheckBox,
  22. },
  23. data() {
  24. return {
  25. title2:'',
  26. listArr2:[],
  27. title3:'',
  28. listArr3:[],
  29. title4:'',
  30. listArr4:[],
  31. clickKey:0,
  32. }
  33. },
  34. methods: {
  35. getItemData(val){
  36. this.clickKey=val.clickObj.dataset.layers;
  37. let index=val.clickObj.dataset.layers;
  38. console.log(val,val.clickObj.dataset.layers);
  39. this.clickKey=val.clickObj.dataset.layers;
  40. if(index==1){
  41. this.listArr3=[];
  42. this.title3='';
  43. this.listArr4=[];
  44. this.title4='';
  45. this.listArr2=val.data.children;
  46. this.title2=val.data.name;
  47. }else if(index==2){
  48. this.listArr4=[];
  49. this.title4='';
  50. this.listArr3=val.data.children;
  51. this.title3=val.data.name;
  52. }else if(index==3){
  53. this.listArr4=val.data.children;
  54. this.title4=val.data.name;
  55. }
  56. },
  57. },
  58. mounted() {
  59. },
  60. }
  61. </script>
  62. <style lang="scss" scoped>
  63. .linkMultiSel{
  64. width: 100%;
  65. height: 300px;
  66. display: flex;
  67. ul,li{
  68. margin: 0;
  69. padding: 0;
  70. list-style: none;
  71. }
  72. .leftBox{
  73. width: 62%;
  74. margin-right: 3%;
  75. border: 1px solid #ccc;
  76. border-radius: 5px;
  77. }
  78. .rightBox{
  79. width: 35%;
  80. border: 1px solid #ccc;
  81. border-radius: 5px;
  82. }
  83. .title{
  84. height: 36px;
  85. line-height: 36px;
  86. font-size: 14px;
  87. font-weight: 600;
  88. border-radius: 5px 5px 0 0;
  89. background-color: rgb(248,249,250);
  90. padding: 0 15px;
  91. border-bottom: 1px solid #ccc;
  92. }
  93. }
  94. </style>