el-cascader 级联选择器 选中范围扩大方式

遇到的问题:el-cascader打开的选择框只能点击圆点才能被选中,点击文字并不能选中

通过 组件库配置项popper-class来实现

class上面写样式:注意不能是scoped的样式隔离,

<style rel="stylesheet/scss" lang="scss">
    .cascaderCla {
      color: red;
     
      & .el-radio {
        display: table;
        vertical-align: middle;
        width: 90%;
        height: 100%;
        position: absolute;
        box-sizing: border-box;
        margin-left: -20px;
        padding-left: 10px;
      }
     
      & .el-radio__input {
        display: table-cell;
        vertical-align: middle;
      }
    }
    
</style>

html里面

<el-cascader
                                        popper-class="cascaderCla"
                                        placeholder="请选择流转部门"
                                        v-model="item.title"
                                        :options="deparmentAllDate"
                                        :props="{ 
                                            checkStrictly: true,
                                            value: 'id',
                                            label: 'title',
                                        }"
                                        @change="choosedDepart($event, item)"
                                        clearable
                                    >
                                    </el-cascader>

 

posted @ 2024-09-20 14:49  haonanElva  阅读(21)  评论(1编辑  收藏  举报