<template>
  <div class="block">
    <span class="demonstration">默认显示所有Tag</span>
    <el-cascader
    collapse-tags
    filterable
    v-model="values"
    @change="handleChange"
    :options="options"
    :props="props"
    clearable>
    </el-cascader>
    <el-checkbox v-model="checked" @change="changeFn()">全选</el-checkbox>
  </div>
  </template>
  
  <script>
    export default {
      data() {
        return {
          checked:true,
          selectAll:[],
          values:[],
          props: { multiple: true },
          options: [
		  { label: '层级1', value: '1', children: [
			{ label: '层级11', value: '11'},
			{ label: '层级12', value: '12'}
		  ]},
		  { label: '层级2', value: '2', children: [
			{ label: '层级21', value: '21' },
			{ label: '层级22', value: '22' },
		  ]},
		  { label: '层级3', value: '3', children: [
			{ label: '层级31', value: '31' }
		  ]}
		]
        };
      },
      mounted(){
         this.selectAll = this.makeData([],[],this.options)
         this.changeFn()
      },
      methods:{
          changeFn(val){
              !this.checked?this.values = []:this.values = JSON.parse(JSON.stringify(this.selectAll))
          },
          handleChange(value){
            this.checked = this.values.length == this.selectAll.length
          },
          makeData(list, upArray, dataSource) {
              dataSource.forEach((item) => {
                      const array = [...upArray, item.value]
                  if (item.children) {
                      this.makeData(list, array, item.children)
                  }else{
                      list.push(array)
                  }
              })
              return list;
          },
      }
    };
  </script>
  <style >
  .el-cascader .el-tag{
    max-width: 50% !important;
  }
  .el-cascader .el-tag:last-of-type{
    max-width: 20% !important;
  }
  .el-cascader__search-input{
    max-width: calc(30% - 20px);margin:0 0 0 5px !important;
    min-width:20px !important;
  }
  </style>