通过改变css使el-tree只显示第一层的复选框

效果

 代码：

 <el-form-item label="商品分类" prop="cate">
        <el-select v-model="careTag" placeholder="请选择" multiple>
               <el-option :value="treeselectArr" style="height: auto">
                  <el-tree ref="tree" 
                    check-strictly 
                    highlight-current 
                    :data="treedata" 
                    :props="defaultProps"
                    node-key="id" 
                    show-checkbox 
                    @check-change="handleNodeClick">
                    </el-tree>
                 </el-option>
         </el-select>
  
<style lang="scss" scoped>
:deep(.el-tree-node) {
    .el-checkbox .el-checkbox__inner {
        display: inline-block;
    }
    .el-tree-node__children .el-checkbox__inner {
        display: none;
    }
}
</style>

只要对比class类，就能使用

举例：

<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm" size="mini">
            
            <el-form-item label="商品分类" prop="cate">
                <el-select v-model="cateTg" placeholder="" multiple>
                    <el-input placeholder="输入关键字查找" v-model="filterText"> </el-input>
                    <el-option :value="treeselectArr" style="height: auto" class="cate">
                        <el-tree ref="tree" check-strictly :data="treedata" :filter-node-method="filterNode" :props="defaultProps" node-key="id" show-checkbox @check-change="handleNodeClick"></el-tree>
                    </el-option>
                </el-select>
            </el-form-item>
            <!--  -->
            
        </el-form>
 
    </div>
</template>

<script> 
export default { 
    data() {
        return {
            filterText: '',
            cateTg: [],
            treeselectArr: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            // 分类
            treedata: [
                {
                    id: 123,
                    label: '河北'
                },
                {
                    id: 32,
                    label: '河南'
                },
                {
                    id: 1,
                    label: '云南',
                    children: [
                        {
                            id: 2,
                            label: '昆明',
                            children: [
                                { id: 3, label: '五华区', children: [{ id: 8, label: '北辰小区' }] },
                                { id: 4, label: '盘龙区' }
                            ]
                        }
                    ]
                },
                {
                    id: 5,
                    label: '湖南',
                    children: [
                        { id: 6, label: '长沙' },
                        { id: 7, label: '永州' }
                    ]
                }
            ],
          
        }
    },
    created() {
        console.log(this.ruleForm)
    },
    // 分类查找
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val)
        }
    },
    methods: {
        // 分类查找
        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
        // 选择分类
        handleNodeClick(data) {
            // 选中的key
            var epIds = this.$refs.tree.getCheckedKeys()
            console.log('选中的KEYid', epIds)

            var cateArr = []
            cateArr = this.$refs.tree.getCheckedNodes().map(function(item) {
                return item.label
            })
            this.cateTg = cateArr
            console.log('选中的tag', cateArr)
            // 选中的所有数据
            this.ruleForm.cate = this.$refs.tree.getCheckedNodes()
            console.log('选中的完整数据', this.ruleForm.cate)
            if (this.ruleForm.cate) {
                // this.$nextTick(() => {
                //     this.$refs['ruleForm'].clearValidate()
                // })
            }
        },
      
    }
}
</script>

<style lang="scss" scoped> 
:deep(.el-tag.el-tag--info .el-tag__close) {
    display: none;
}
 
.cate {
    padding: 0 0 !important;
}
</style>