123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185 |
- <template>
- <div class="multiCheckbox" >
- <div class="linkMulti_list" ref="mycheckMul">
- <div class="title">{{title}}</div>
- <ul class="linkMulti_list_one">
- <li class="checkAll"><a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange"> 全选</a-checkbox> </li>
- <li @click="listItemClick(item)" v-for="(item,index) in listArr" :key='index' >
- <a-checkbox @change='checkItemChange' >{{item.name}}</a-checkbox>
- <span class="more" v-show="item.children"><a-icon type="right" /></span>
- </li>
- </ul>
- </div>
- <MultiCheckBox class="childClass" :title='currentItem.name' :listArr='currentItem.children' v-if="currentItem" :curLayerNum='currentLayerNum' />
- </div>
- </template>
- <script>
- const plainOptions = ['Apple', 'Pear', 'Orange'];
- export default {
- name:'MultiCheckBox',
- props:['title','listArr','curLayerNum'],
- data() {
- return {
- checkedList: [],
- indeterminate: false,
- checkAll: false,
- plainOptions,
- layersNum:0,//控制层级
- currentLayerNum:0,//当前层级是多少层,
- currentItem:null,
- }
- },
- methods: {
- onChange(checkedList) {
- this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
- this.checkAll = checkedList.length === plainOptions.length;
- },
- onCheckAllChange(e) {
- Object.assign(this, {
- checkedList: e.target.checked ? plainOptions : [],
- indeterminate: false,
- checkAll: e.target.checked,
- });
- },
- listItemClick(item){
- console.log(item);
- if(item.children){
- this.currentLayerNum++;
- this.currentItem=item;
- this.$refs.mycheckMul.style='width:50%;border-right:1px solid #ccc';
-
- }
- },
- checkItemChange(e){
- console.log(e.target.checked);
- // if(e.target.checked){
- // }
- },
- //判断传入的数组的children层数
- getLayersNum(arr){
- arr.map((item,index)=>{
- if(item.children){
- }
- })
- }
- },
- mounted() {
- this.currentLayerNum=this.curLayerNum;
- console.log(this.curLayerNum)
- },
- }
- </script>
- <style lang="scss" scoped>
- .multiCheckbox{
- // width:100%;
- // overflow: auto;
- height: 100%;
- display: flex;
- overflow: scorll;
- ul,li{
- margin: 0;
- padding: 0;
- list-style: none;
- }
- .linkMulti_list{
- // padding: 5px 0px;
- display: inline-block;
- width: 100%;
- height: 300px;
- box-sizing: border-box;
- overflow: hidden;
- .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;
- }
- ul{
- height: 264px;
- overflow: auto;
- }
- .checkAll{
-
- }
- li{
- height: 30px;
- line-height: 30px;
- cursor: pointer;
- padding: 0 15px;
- position: relative;
- .more{
- position:absolute;
- top: 2px;
- right: 10px;
- }
- }
- li:hover{
- background-color: rgb(240,240,240);
- }
-
- }
- .ant-checkbox-group{
- width: 100%;
- }
- }
- ul,li{
- margin: 0;
- padding: 0;
- list-style: none;
- }
- .linkMulti_list{
- // padding: 5px 0px;
- display: inline-block;
- width: 100%;
- min-width: 200px;
- height: 300px;
- box-sizing: border-box;
- overflow: auto;
- .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;
- }
- ul{
- height: 264px;
- overflow: auto;
- }
- .checkAll{
-
- }
- li{
- height: 30px;
- line-height: 30px;
- cursor: pointer;
- padding: 0 15px;
- position: relative;
- .more{
- position:absolute;
- top: 2px;
- right: 10px;
- }
- }
- li:hover{
- background-color: rgb(240,240,240);
- }
- }
- .addborder{
- border-right: 1px solid #ccc;
- }
- </style>
|