前端学习笔记-vue ElementUI的el-级联选择器使用记录
el-cascader 级联选择器
>
export default {
name: "test",
data() {
return {
/*
:props="defaultParams"
:options="options"
v-model="selectedOptions"
defaultParams--绑定一个像是对象的标签和值，以及子级选项，其中数据来源于options中的数据（对象数组）
对象数组中的每一个对象都是包含{cat_name：'',cat_id:'',children:{} }
options--可选项数据源，要显示的对象数组
selectedOptions--为选择节点的cat_id的值组成
*/
defaultParams: {
//这三个key值时固定的，val值随着你想要显示的数据变量名修改
label: 'cat_name',
value: 'cat_id',
children: 'children'
},
options: [],
selectedOptions: []
};
},
created() {
this.getGoodsList()
},
methods: {
async getGoodsList() {
const res = await this.$http.get(`categories?type=3`)
console.log(res.data)
const {data, meta: {msg, status}} = res.data
this.options = data;
},
//当进行点选节点是触发的方法
changeOptionList(val){
console.log(this.selectedOptions)
}
}
}
>说明
- 网络请求方法是项目协议定义方法，具体需要结合项目需求
- defaultParams的设置需要根据具体数据定义，不可照抄
- 什么时候使用级联选择器？符合defaultParams结构的数据可使用，即如下
{
"data": {
"cat_id": 3,
"cat_name": "厨卫电器",
"children":{
"cat_id": 5,
"cat_name": "xxxx",
"children":{
}
}
}
}推荐阅读
- EffectiveObjective-C2.0|EffectiveObjective-C2.0 笔记 - 第二部分
- 由浅入深理解AOP
- 继续努力，自主学习家庭Day135(20181015）
- python学习之|python学习之 实现QQ自动发送消息
- Android中的AES加密-下
- 一起来学习C语言的字符串转换函数
- 定制一套英文学习方案
- 漫画初学者如何学习漫画背景的透视画法（这篇教程请收藏好了！）
- 《深度倾听》第5天──「RIA学习力」便签输出第16期
- 如何更好的去学习