关于element ui中el-cascader的使用方式
作者：whittet.沉梦昂志
这篇文章主要介绍了关于element ui中el-cascader的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
element ui中el-cascader使用
要想实现进入页面直接选中选择器中的选项
例→
那v-model绑定的值必须是数组形式的！！（element ui官方文档中没提到这一点好像，我也是试了很多次才发现的）
代码
<el-form-item label="分类:" prop="region" class="region">
<div class="block">
<el-cascader
v-model="optionProps" //**重点**
:options="myOptions2"
:props="{ checkStrictly: true }"
@change="handleChange"
></el-cascader>
</div>
</el-form-item>
element中el-cascader使用及自定义key名
下面展示一些 内联代码片。
el-cascader的通过改变值时，获取当前选中数据
根据接口返回数据，灵活定义key名
// template中的应用 options为数据
// 1.props="optionProps"：props是框架属性，optionProps为自定义data中的key
//2. ref="cascaderAddr" 自定义 用来 @change事件取值用
<template>
<el-cascader
v-model="ruleForm.address"
:options="options"
:props="optionProps"
clearable
ref="cascaderAddr"
@change="cascaderChange"
></el-cascader>
</template>
//定义符合自己数据的key值
<script>
data() {
return {
optionProps: {
value: "code",
label: "name",
children: "children",
},
}
},
methods: {
cascaderChange() {
console.log(
this.$refs["cascaderAddr"].getCheckedNodes()[0].pathLabels,
"选择地址"
);
// this.$refs["cascaderAddr"].getCheckedNodes()//完整的数据
//this.$refs["cascaderAddr"].getCheckedNodes()[0].pathLabels//value的值
},
}
</script>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。