element级联选择框的使用~干货分享

下面是对element级联选择框的使用介绍，跟小编来看看吧~

文章目录

使用级联选择框的步骤
- 导入使用的级联选择框
- 渲染级联选择框
- 获取数据
解决级联选择框过长问题
- 级联选择框过长的问题及解决办法

使用级联选择框的步骤

导入使用的级联选择框

import Vue from 'vue'
import {Cascader,
} from 'element-ui'
// 注册组件
Vue.use(Cascader)

渲染级联选择框

<!-- 选择商品分类的级联选择框 -->
<!-- expand-trigger="hover" - 鼠标浮动的时候显示级联选择框 -->
<!-- :options="catelist" - 指定数据源catelist -->
<!-- :props="cateProps" - 把请求到的数据赋值给数据源catelist -->
<!-- v-model="selectedCateKeys" - 级联选择框双向绑定到selectedCateKeys数组 -->
<!-- @change="handleChange" - 监听级联选择框变化的事件 -->
<el-cascaderexpand-trigger="hover":options="catelist":props="cateProps"v-model="selectedCateKeys"@change="handleChange">
</el-cascader>

获取数据

<script>
export default {data() {return {catelist: [],//   级联选择器的配置对象cateProps: {value: 'cat_id',label: 'cat_name',children: 'children',},// 级联选择框双向绑定到的数组selectedCateKeys: [],}},created() {this.getCateList()},methods: {//   获取所有的商品分类列表async getCateList() {const { data: res } = await this.$http.get('categories')if (res.meta.status !== 200) {return this.$message.error('获取商品分类失败！')}this.catelist = res.dataconsole.log(this.catelist)},// 级联选择框选中项变化，会触发这个函数handleChange() {console.log(this.selectedCateKeys)},},
}
</script>

接口：

请求路径：categories
请求方法：get
请求参数

参数名	参数说明	备注
type	[1,2,3]	值：1，2，3 分别表示显示一层二层三层分类列表【可选参数】如果不传递，则默认获取所有级别的分类
pagenum	当前页码值	【可选参数】如果不传递，则默认获取所有分类
pagesize	每页显示多少条数据	【可选参数】如果不传递，则默认获取所有分类

响应参数

参数名	参数说明	备注
cat_id	分类 ID
cat_name	分类名称
cat_pid	分类父 ID
cat_level	分类当前层级

响应数据

{"data": [{"cat_id": 1,"cat_name": "大家电","cat_pid": 0,"cat_level": 0,"cat_deleted": false,"children": [{"cat_id": 3,"cat_name": "电视","cat_pid": 1,"cat_level": 1,"cat_deleted": false,"children": [{"cat_id": 6,"cat_name": "曲面电视","cat_pid": 3,"cat_level": 2,"cat_deleted": false},{"cat_id": 7,"cat_name": "海信","cat_pid": 3,"cat_level": 2,"cat_deleted": false}]}]}],"meta": {"msg": "获取成功","status": 200}
}

解决级联选择框过长问题

级联选择框过长的问题及解决办法

在使用级联选择框的时候出现了级联选择框过长的问题
级联选择框过长，上面的内容看不到

在全局样式中，加上如下样式：

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

element级联选择框的使用~干货分享相关推荐

前端学习（1963）vue之电商管理系统电商系统之控制级联选择框的选择范围
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
解决ElementUI级联选择框el-cascader任选一级的坑
在官方文档给出的示例中,el-cascader设置"props.checkStrictly = true"即可实现任意选择一级,但却只能点击左边的单选框选择节点,不能直接点击文字选 ...
解决使用element-ui级联选择框内容空白且下拉框过高
先看问题: ```bash<el-dialogtitle="添加分类":visible.sync="addCateDialogVisible"width= ...
手动清空Element Select选择框内容 v-model 和 option下拉框选项导致无法select选中，或者选中视图不渲染问题,
有时候一些需求,需要上下两个Select 进行联动,比如名称/id选择框的内容需要根据科目选中后的内容,来进行搜索,所以当科目清空后名称/ID 需要清空 v-model 的值.以及 el-op ...
城市与地区级联选择框的使用
效果图: 准备工作: 1.需要包含所有城市有所有地区大的数组js文件 2. 定义城市的组件,可以设置为全局组件 3.就是在组件中使用啦 @/city.js文件 const datas = [{city ...
vue级联选择框(Cascader)动态渲染数据
<el-cascaderv-model="baseForm.selectAdressKeys"ref="cascader"@change="ar ...
前端学习（1962）vue之电商管理系统电商系统之渲染商品分类的选择框
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
vue、Cascader 级联选择、Cascader 属性事件方法、vue Cascader 所有级联选择样式、vue Cascader 级联选择全部属性事件方法
vue.Cascader 级联选择.Cascader 属性事件方法.vue Cascader 所有级联选择样式.vue Cascader 级联选择全部属性事件方法 Cascader 级联选择何时使用 ...
android 级联选择组件 CascadePickerView
CascadePickerView 级联选择组件,包括基础组件和城市选择组件目前公开的记录组件基本都有限制,限制选择级别,如很多城市组件只能选择三级:省.市.县本组件不限制级别,可无极显示,只要按 ...

element级联选择框的使用~干货分享

文章目录

使用级联选择框的步骤

导入使用的级联选择框

渲染级联选择框

获取数据

解决级联选择框过长问题

级联选择框过长的问题及解决办法

element级联选择框的使用~干货分享相关推荐

最新文章

热门文章