解决使用element-ui级联选择框内容空白且下拉框过高

先看问题：


```bash<el-dialogtitle="添加分类":visible.sync="addCateDialogVisible"width="50%"@close="addCateDialogClose"><el-formref="addCateDialogRef":model="addCateForm"label-width="100px":rules="addCateFormRules"><el-form-item label="分类名称:" prop="cat_name"><el-input v-model="addCateForm.cat_name"></el-input></el-form-item><el-form-item label="分类标题:"><el-cascaderv-model="selectKeys":options="parentCateList":props="cascaderProps"@change="parentChange"clearable></el-cascader></el-form-item></el-form><span slot="footer" class="dialog-footer"><el-button @click="addCateDialogVisible = false">取 消</el-button><el-button type="primary" @click="addCate">确 定</el-button></span></el-dialog>


```bashparentCateList: [],cascaderProps: {value: 'cat_id',lable: 'cat_name',children: 'children',},// 选中的父级分类的id数组selectKeys: []

 // 点击按钮展开添加分类对话框showAddCateDialog() {// 再展开对话框之前先把选择框数据更新出来this.getParentCateList()this.addCateDialogVisible = true},// 获取父级分类的数据列表async getParentCateList() {const { data: res } = await this.$http.get('categories', {params: {type: 2 }})if (res.meta.status !== 200) {return this.$message.error('获取父级分类数据失败')}console.log(res.data);this.parentCateList = res.data},

我一遍又一遍的看视频，各种检查代码，愣是没发现问题出现在哪，因为我在获取父级分类列表中打印了数据，控制台是可以正常打印的，我就以为我的级联配置没有问题，然后一直纠结parentCateList这个数组是不是有问题，直到今晚我发现我的label写错了。。。。
正确级联选择器配置对象如下：

cascaderProps:{expandTrigger: 'hover',// 指定选项的值value:'cat_id',// 指定选项标签label:'cat_name',// 指定选项的子选项children:'children',checkStrictly:true}

二：级联下拉框过高时解决办法
在全局css配置中加上：

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

解决使用element-ui级联选择框内容空白且下拉框过高相关推荐

根据一个下拉框改变另外一个下拉框内容
一.前言在编写网页的时候,有时候需要用到多重内容选择,例如先选择省市,再选择县镇等过程.这里简单实现了根据第一个下拉框点击的时候修改另外一个下拉框的内容,希望能对大家有所帮助. 二.实现思路定义两 ...
store下拉框同步_关于选择主下拉框后~后面的下拉框跟着同步一起变化的问题~~...
关于选择主下拉框后~后面的下拉框跟着同步一起变化的问题~~ 代码很简单~4个下拉框~想要实现的效果就是~主下拉框选择了"赵子龙",后面3个下拉框当前选项也同步成"赵子龙& ...
获取数据库内容放入下拉框中
获取数据库里的数据放入下拉框中,使下拉框显示的内容是数据库里的内容功能分析: 设计并实现数据库插入相关数据在登陆页面点击注册按钮时跳到Servlet中在Servlet中连接数据库查询内容放入 ...
php下拉选择联动,实现输入框与下拉框联动
下面我就为大家分享一篇实时监控input框,实现输入框与下拉框联动的实例,具有很好的参考价值,希望对大家有所帮助. 如图: html代码奖励类型: ---请选择--- {foreach $rewar ...
php可输入的下拉框,JavaScript_可编辑下拉框的2种实现方式，可编辑下拉框-HTML 复制代码代 - phpStudy...
可编辑下拉框的2种实现方式可编辑下拉框-HTML A类 B类 C类 D类可编辑下拉框-JS 可编辑下拉框可编辑下拉框作者 function combox(obj,select){ this.o ...
android加载时二级联动点击二级联动,Android实现联动下拉框二级地市联动下拉框功能...
日常使用软件中,为了方便且规范输入,会使用到下拉框进行输入,如注册时生日选项,购物时的地址输入,都会用到下拉框,今日笔者为了巩固已学的知识,实现了二级联动下拉框用作回顾及分享给求知的新手. 思路/步骤 ...
下拉框优化威zx78_下拉框优化应到千捷网络下拉系统
下拉词,是百度从网友的搜索词中筛选出搜索量较大的词条,整理分类,从而建立了百度联想词的词库,当用户输入搜索词就会被推荐. 所以下拉词词库是被搜索引擎收录整理,只要使用搜索引擎,无论在何处搜索引擎都会根 ...
layui多级联动下拉框的实现_layui下拉框实现级联
选择city 北京上海广州深圳杭州选择区域 layui.use('form', function () { var form = layui.form; layui.form.on('sel ...
【js】复选框，复选下拉框，文本框勾连
[js]对常见事件的一个总结 ps: 内容涉及(kendo Ui, jQuery) 如下图所示:要求实现功能点 (1)用户名(复选下拉框,可选择多个)和用户名(文本输入框)相勾连复选下拉框改变,文本 ...

解决使用element-ui级联选择框内容空白且下拉框过高

解决使用element-ui级联选择框内容空白且下拉框过高相关推荐

最新文章

热门文章