element-UI中级联选择器cascader的问题及解决

-使用新版的cascader,通过官网的代码进行修改

<el-cascader
  :options="parentCateList"
  :props="{ expandTrigger: 'hover', 
   value: 'cat_id',
     label: 'cat_name',
     children: 'children', 
     checkStrictly: true }"
   v-model="selectedKeys"
   @change="parentCateChanged"
   clearable>
</el-cascader>

其中props中增加了expandTrigger属性,对应的配置对象也写在其中,可以任意选择任意一级的选项也放在了里面,将checkStrictly设置为true即可

问题及解决

使用cascader组件时,发现渲染的数据过多时,组件的高度就会占满整个屏幕的高度,而cascader组件不会自动加上滚动条,导致数据缺失,并且对应的二级选项也没渲染出来,要在全局样式中设置菜单的高度,这样就可以解决这一问题

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

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在 Vue3 使用 Element UICascader 组件实现省市区选择,需要进行以下步骤: 1. 安装 Element UI 可以使用 npm 或者 yarn 安装 Element UI: ``` npm i element-plus -S ``` 或者 ``` yarn add element-plus ``` 2. 引入 Cascader 组件 在需要使用 Cascader 组件的 Vue 组件,可以通过以下方式引入 Cascader 组件: ```js import { defineComponent } from 'vue' import { Cascader } from 'element-plus' ``` 3. 在模板使用 Cascader 组件 在模板,可以使用 Cascader 组件进行省市区选择。例如: ```html <template> <div> <el-cascader :options="options" v-model="selectedOptions" @change="handleChange" placeholder="请选择省市区" clearable></el-cascader> </div> </template> ``` 其,`:options` 属性指定了 Cascader 的选项数据,`v-model` 绑定了选的省市区数据,`@change` 监听选项变化事件,`placeholder` 属性指定了默认提示文本,`clearable` 属性指定了可以清空选项。 4. 编写选项数据 Cascader 组件需要一个选项数据列表来渲染下拉菜单,可以通过以下方式编写选项数据: ```js export default defineComponent({ name: 'CascaderDemo', data() { return { options: [ { value: 'beijing', label: '北京市', children: [ { value: 'chaoyang', label: '朝阳区', children: [ { value: 'sanlitun', label: '三里屯', }, { value: 'guomao', label: '国贸', }, ], }, { value: 'haidian', label: '海淀区', children: [ { value: 'zhongguancun', label: '关村', }, { value: 'wudaokou', label: '五道口', }, ], }, ], }, { value: 'shanghai', label: '上海市', children: [ { value: 'pudong', label: '浦东新区', children: [ { value: 'lujiazui', label: '陆家嘴', }, { value: 'zhangjiang', label: '张江', }, ], }, { value: 'xuhui', label: '徐汇区', children: [ { value: 'xujiahui', label: '徐家汇', }, { value: 'huaihai', label: '淮海路', }, ], }, ], }, ], selectedOptions: [], } }, methods: { handleChange(value) { console.log(value) }, }, }) ``` 其,每个选项数据都包括 `value` 和 `label` 两个属性,`children` 属性表示该选项的子选项。在 `handleChange` 方法,可以获取到选的省市区数据。 以上就是在 Vue3 使用 Element UICascader 组件实现省市区选择的步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值