|
@@ -4,8 +4,9 @@
|
|
|
<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' :data-layers='curLayerNum'>
|
|
|
- <a-checkbox @change='checkItemChange' >{{item.name}}</a-checkbox>
|
|
|
+ <li @click="listItemClick(item)" v-for="(item,index) in listArr" :key='index' :data-layers='curLayerNum' ref="checkList">
|
|
|
+ <a-checkbox @change="onChange($event,item)" :value='item.value' :checked='item.checked'>{{item.name}}</a-checkbox>
|
|
|
+ <!-- <span>{{item.name}}</span> -->
|
|
|
<span class="more" v-show="item.children"><a-icon type="right" /></span>
|
|
|
</li>
|
|
|
</ul>
|
|
@@ -15,46 +16,70 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-const plainOptions = ['Apple', 'Pear', 'Orange'];
|
|
|
+
|
|
|
export default {
|
|
|
name:'MultiCheckBox',
|
|
|
props:['title','listArr','curLayerNum'],
|
|
|
data() {
|
|
|
return {
|
|
|
- checkedList: [],
|
|
|
+ checkedList: [],
|
|
|
indeterminate: false,
|
|
|
checkAll: false,
|
|
|
- plainOptions,
|
|
|
+ plainOptions:[],
|
|
|
layersNum:0,//控制层级
|
|
|
currentLayerNum:0,//当前层级是多少层,
|
|
|
currentItem:null,
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- onChange(checkedList) {
|
|
|
- this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length;
|
|
|
- this.checkAll = checkedList.length === plainOptions.length;
|
|
|
+ onChange(e,item) {
|
|
|
+ console.log(e.target,item)
|
|
|
+ if(e.target.checked){
|
|
|
+ this.$set(item,'checked',true)
|
|
|
+ this.checkedList.push(e.target.value)
|
|
|
+ console.log(this.listArr)
|
|
|
+ }else{
|
|
|
+ this.$set(item,'checked',e.target.checked)
|
|
|
+ console.log(this.listArr)
|
|
|
+ let index=this.checkedList.indexOf(e.target.value);
|
|
|
+ if(index > -1){
|
|
|
+ this.checkedList.splice(index,1)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.indeterminate = !!this.checkedList.length && this.checkedList.length < this.plainOptions.length;
|
|
|
+ this.checkAll = this.checkedList.length === this.plainOptions.length;
|
|
|
},
|
|
|
onCheckAllChange(e) {
|
|
|
Object.assign(this, {
|
|
|
- checkedList: e.target.checked ? plainOptions : [],
|
|
|
+ checkedList: e.target.checked ? this.plainOptions : [],
|
|
|
indeterminate: false,
|
|
|
checkAll: e.target.checked,
|
|
|
});
|
|
|
+ if(this.checkedList.length){
|
|
|
+ this.listArr.forEach((item)=>{
|
|
|
+ this.$set(item,'checked',true)
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.listArr.forEach((item)=>{
|
|
|
+ this.$set(item,'checked',false)
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
listItemClick(item){
|
|
|
+
|
|
|
+ this.$emit('getItemData',{
|
|
|
+ 'clickObj':event.target,
|
|
|
+ 'data':item
|
|
|
+ })
|
|
|
+
|
|
|
|
|
|
- this.$emit('getItemData',{
|
|
|
- 'clickObj':event.target,
|
|
|
- 'data':item
|
|
|
- })
|
|
|
},
|
|
|
- checkItemChange(e){
|
|
|
- console.log(e.target.checked);
|
|
|
- // if(e.target.checked){
|
|
|
+ // checkItemChange(e){
|
|
|
+ // console.log(e.target.checked);
|
|
|
+ // // if(e.target.checked){
|
|
|
|
|
|
- // }
|
|
|
- },
|
|
|
+ // // }
|
|
|
+ // },
|
|
|
//判断传入的数组的children层数
|
|
|
getLayersNum(arr){
|
|
|
arr.map((item,index)=>{
|
|
@@ -66,6 +91,12 @@ const plainOptions = ['Apple', 'Pear', 'Orange'];
|
|
|
},
|
|
|
mounted() {
|
|
|
this.currentLayerNum=this.curLayerNum;
|
|
|
+ // this.plainOptions=this.listArr
|
|
|
+ this.listArr.forEach(element => {
|
|
|
+ // console.log(element);
|
|
|
+ this.plainOptions.push(element.value);
|
|
|
+ element.checked=false
|
|
|
+ });
|
|
|
console.log(this.curLayerNum)
|
|
|
},
|
|
|
}
|
|
@@ -73,11 +104,8 @@ const plainOptions = ['Apple', 'Pear', 'Orange'];
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.multiCheckbox{
|
|
|
- // width:100%;
|
|
|
- // overflow: auto;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- overflow: scorll;
|
|
|
+ width:100%;
|
|
|
+ height: 300px;
|
|
|
ul,li{
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
@@ -87,7 +115,7 @@ const plainOptions = ['Apple', 'Pear', 'Orange'];
|
|
|
// padding: 5px 0px;
|
|
|
display: inline-block;
|
|
|
width: 100%;
|
|
|
- height: 300px;
|
|
|
+ height: 100%;
|
|
|
box-sizing: border-box;
|
|
|
overflow: hidden;
|
|
|
.title{
|
|
@@ -99,6 +127,7 @@ const plainOptions = ['Apple', 'Pear', 'Orange'];
|
|
|
background-color: rgb(248,249,250);
|
|
|
padding: 0 15px;
|
|
|
border-bottom: 1px solid #ccc;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
ul{
|
|
|
height: 264px;
|
|
@@ -128,56 +157,6 @@ const plainOptions = ['Apple', 'Pear', 'Orange'];
|
|
|
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>
|