elementui级联选择器默认值,el-cascader 多选
主要介绍El-cascade选择器在elementui中的实践，通过实例代码详细介绍，有一定的参考价值，感兴趣的朋友可以参考一下。
一.效果
二、主要代码
目录
功能：使用接口回调的数据显示可选项目，开始有默认选项值。
一、效果
El-cascader ref= cascaderAddr :options= rangeArr :props= option props v-model= plable @ change= handle change 3 style= width:100%；/埃尔-卡斯卡德
解释：
(1)数据来源与官方数据来源不符，需要重新指向。
但是我们接口返回的数据源是这样的：
所以需要重新点值，标签值，子值(所以有：props=" option props ")；
(2)expandTrigger:点击/悬停是二级菜单的展开方式，默认为点击。
(3)checkStrictly:是否严格遵守父子节点互不相关？
导出默认值{
data() {
//交货地点选择来源
rangeArr: []，
optionProps: {
值： sguid ，
标签:“地址”，
孩子：“孩子”，
严格检查：正确，
expandTrigger:“悬停”
},
PL: []，//交货选择值
},
已安装：函数(){
//交货地点
这个。$axios。获取(“url”)。然后(response={
this . rangearr=response . data . obj；
Console.log(可以选择AAAA作为分发源，this . rangearr)；
})。catch(函数(错误){
//请求处理失败
console.log(错误)；
});
//获取初始值
这个。$axios.get(url )。然后((响应)={
if (response.data.status==200){
this . plable=response . data . obj . ranges _ sguid；//默认选择的值
}
})。catch(function (error) {//请求处理失败。
console.log(错误)；
});
},
方法：{
handleChange3(值){
Console.log(选定的id值，值)；
Console.log(检查lable的值，this . plable)；
var thsAreaCode=this。$ refs . cascaderaddr . getcheckednodes()[0]。路径标签；//注2:获取标签值
Console.log (label ，THS区号)//注3:最终结果是一个一维数组对象。
var len=value . length-1；
this . form . ranges _ sguid=value[len]；//这是要提交的最终修改的选定数据值。
console.log(guid ，this . form . ranges _ sguid)；
这个。$ refs . cascaderaddr . toggledropdownsvisible()；//选择后把下拉界面收起来。
}
}
这就是这篇关于El-Cascade选择器在elementui中的实践的文章。有关el-cascader选择器元件的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。