zoukankan      html  css  js  c++  java
  • Element-UI中的Cascader 级联选择器高度以及位置问题

    描述

    使用Cascader 级联选择器的组件来跑项目的时候发现高度和位置存在问题

    相关代码如下:
    Cate.vue中HTML结构:

    <el-form :model="shopCateForm" :rules="shopCateFormRules" ref="shopCateFormRef" label-width="100px">
      <el-form-item label="分类名称:" prop="cat_name">
          <el-input v-model="shopCateForm.cat_name"></el-input>
      </el-form-item>
      <el-form-item label="父级分类:" class='parentBox'>
          <el-cascader v-model="selectedKeys" :options="parentCateList" :props="cascaderProps" @change="parentCateChanged" style=" 100%"></el-cascader>
      </el-form-item>
    </el-form>
    

    Cate.vue中data数据:

      // 父级分类
      parentCateList: [],
      // 选择的父级分类
      selectedKeys: [],
      // 父级分类配置项
      cascaderProps: {
          expandTrigger: 'hover',
          label: 'cat_name',
          value: 'cat_id',
          children: 'children',
          checkStrictly: true
      }
    

    效果如下:

    如果直接在Cate.vue文件中修改下面的样式,还是不起效果

    .el-cascader-panel {
        height: 300px;
    }
    

    原因

    它可能是由js动态生成的元素标签,然后在body标签最后追加的一个元素,已经脱离了Cate.vue的管理。

    解决办法

    在全局样式文件global.css中设置如下配置

    .el-cascader-panel {
        height: 300px;
    }
    
  • 相关阅读:
    构建高性能的读服务
    Redis基础入门
    基于TCP实现简单的聊天室
    递归

    Go标准库Cond
    排序(冒泡,选择,插入,快速)
    链表
    队列
    Golang实现RPC
  • 原文地址:https://www.cnblogs.com/it774274680/p/15313545.html
Copyright © 2011-2022 走看看