通过层级选择器（el-cascader）修改的不带多选框的，但是可以实现多选的功能

<template>
    <div>
       <div>
            <div class="block">
                <span class="demonstration">多选可搜索</span>
                <el-cascader
                    ref="cascaderHandle"
                    v-model="value"
                    placeholder="试试搜索：指南"
                    :options="options"
                    :show-all-levels="false"
                    :props="{ multiple: true, emitPath: false }"
                    popper-class="disableFirstLevel"
                    filterable
                >
                    <template slot-scope="{node, data}">
                        <div v-if="data.value=== 'yhz'">
                            {{ data.label }} === <span v-if="new Set(value).has(data.value)">和{{ data.value }}</span>
                        </div>
                        <div v-else @click="dataNode(node, data)">
                            {{ data.label }} === <span v-if="new Set(value).has(data.value)">和{{ data.value }}</span>
                        </div>
                    </template>
                </el-cascader>
            </div>
       </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            modalKey:0,
            options: [{
                value: 'yhz',
                label: '指南',
                children: [
                    {
                        value: 'shejiyuanze',
                        label: '设计原则',
                    },
                    {
                        value: 'ggggg',
                        label: '设计原则组',
                    },
                ]
                }, 
                {
                    value: 'zujjhdgfhs',
                    label: '组件',
                },
                {
                    value: 'ziyuan',
                    label: '资源',
                }
            ],
            colWidths: {
                a: 150, // 初始宽度
                b: 300, // 初始宽度
            },
            value: [],
            startX: 0,
            colKey: null,
      };
    },
    methods: {
        focus(e){
            console.log('e', e);
        },
        
        change(e){
            console.log('e',e);
            // this.$refs.cascaderHandle.dropDownVisible = true;
        },

        dataNode(node,data){
            // 加上这个还可以变单选
            // this.value = [];
            console.log('data',data,node,this.value);
            if(new Set(this.value).has(data.value)){
                console.log('存在值');
                this.value = this.value.filter(item => item !== data.value)
            } else {
                console.log('不存在值时,加上，不清楚为啥用push方法,页面不更新了');
                this.value = this.value.concat(data.value);
            }
            console.log('thia,valie', this.value);
        },
        startResize(key, e) {
            this.colKey = key;
            this.startX = e.clientX;
            document.addEventListener('mousemove', this.doResize);
            document.addEventListener('mouseup', this.stopResize);
        },

        doResize(e) {
            if (this.colKey) {
            const deltaX = e.clientX - this.startX;
            this.colWidths[this.colKey] += deltaX;
            this.startX = e.clientX;
            }
        },

        stopResize() {
            this.colKey = null;
            document.removeEventListener('mousemove', this.doResize);
            document.removeEventListener('mouseup', this.stopResize);
        },
    },
  };
</script>
<style lang="less" scoped>
  th, td {
    border: 1px solid #ddd;
    text-align: left;
    padding: 8px;
    position: relative;
  }
   
  th:hover {
    cursor: e-resize;
  }
  </style>
<style lang="less">
    .disableFirstLevel{
        .el-cascader-menu{
            .el-checkbox {
                width: 80%;
                position: absolute;
                opacity: 0;
                display: none;
            }
        }
    }
</style>
  

思路：

1.去除原本的el-checkbox，通过css隐藏

2.通过组件提供的插槽自定义点击事件，将点击到的值进行手动处理，渲染到页面。主要方法  dataNode