飞道的博客

2021-04-12

344人阅读  评论(0)

Vue项目前端学习之路——电商管理系统(Element-UI)III

问题不断
相同代码显示出的效果却是不同的

课程中呈现的效果是:

我的效果呈现是:

1.添加商品分类时使用级联选择器,出现radio选择框,怎么去除。
主要原因是:主代码<el-cascader expand-trigger=“hover” :options=“parentCateList” :props=“cascaderProps” v-model=“selectedKeys” @change=“parentCateChanged” clearable change-on-select>中有change-on-select,element ui组件的最新版本2.15.1,加入后就会显示点击radio小圆圈才能选中,因此只需要设置样式将其单选框隐藏即可:

/*以下样式将单选框隐藏,并绝对定位与文字内容一样大小,这样点击时可以点击整行文字*/
.el-cascader-panel .el-radio{
  position:absolute;
  z-index:10;
  padding:0 10px;
  width:132px;
  height:34px;
  line-height:34px;
}
.el-cascader-panel .el-radio__input{
  visibility:hidden;
}
.el-cascader-panel .el-input-node__postfix{
  top:10px;
}
  1. 级联选择器下拉框过高问题。
    在全局css文件中(注意一定是全局css文件中加,使用的当前文件无效),或模板组件的style中加入如下代码:
.el-cascader-panel {
    height: 230px;
  }

转载:https://blog.csdn.net/niannian55/article/details/115643717
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场