解决vueCascader级联选择器复选框只能点方框选中问题

解决vueCascader级联选择器复选框只能点方框选中问题

<el-cascader ref="assetCascder"
             v-model="bindAsset"
             clearable
             filterable
             click-label
             :collapse-tags="true"
             :props="{ multiple: true}"
             :options="assetOptions"
 			 @change="selectAssetChange">
   <template slot-scope="{ node, data }">
      <span @click="clickData(node)">{{ data.label }}</span>
   </template>
 </el-cascader>
 <script lang='ts'>
  import { Component, Vue} from 'vue-property-decorator';
  @Component({})
  export default class AssetModal extends Vue {
   private bindAsset = [];
   private getPath = [];
 // 1. 选中□ 后,对获取的内容进行的操作
 selectAssetChange (value) { 
        this.bindAsset = [];
        this.$refs.assetCascder.getCheckedNodes().forEach(item => {
            this.bindAsset.push(item.path);
        });//获取当前选中的复选框内容
        value = this.bindAsset;//将选中的内容赋值给,点击□选中的内容,这样点击文字选中的内容也会在选中框里显示
       
        //...后面是你要对选中内容进行的操作
    }
  // 2. 点击文字后进行的操作
 clickData (node) {
        this.getPath.push(node.path);
        let expendChildren = [...node];
        let expend = this.getFlatArr(expendChildren);
        expend.forEach(item=>{
            item.checked = !item.checked;
        });
        this.selectAssetChange(this.getPath);
    }
  //3. 获取node节点后,对数据进行展开处理(将树状结构,平铺开)如后端返回的数据不是树状可忽略,不用此函数。
 getFlatArr (arr) {
        return arr.reduce((a, item) => {
            let flatArr = [...a, item];
	        // 可以在此处限制各种需要的条件,在展示字段前加空格,——之类的,以及其它情况
            if (item.children) {
                flatArr = [...flatArr, ...this.getFlatArr(item.children)];
            }
            return flatArr;
        }, []);
    } 
  }
 </script>
 

你可能感兴趣的:(ts,html,vue.js,前端,typescript)