How to implement el-cascader cascade selector in elementui
This article is about how to implement el-cascade selector in elementui. Xiaobian thinks it is quite practical, so share it with everyone for reference. Let's follow Xiaobian and have a look.
I. Effect
Function: Use the interface to recall data, display optional items, and begin to have default option values.
II. Main Code
Explanation:
(1) The data source does not match the official data source and needs to be redirected.
但是我们接口返回的数据源是这样的：
所以要重新指向一下value值、lable值以及children值（所以才有了:props="optionProps"）;
（2）expandTrigger：次级菜单的展开方式click / hover，默认为click
（3）checkStrictly：是否严格的遵守父子节点不互相关联
export default { data() {//配送位置选择源 rangeArr: [], optionProps: { value: 'sguid', label: 'address', children: 'childs', checkStrictly: true, expandTrigger: 'hover' }, plable: [], //配送选择值},mounted: function() {//配送位置 this.$axios .get('url') .then(response => { this.rangeArr = response.data.obj; console.log('配送可选择源aaaa', this.rangeArr); }) .catch(function(error) { // 请求失败处理 console.log(error); }); //获取初始值 this.$axios.get("url") .then((response) => { if (response.data.status == 200){ this.plable=response.data.obj.ranges_sguid;//默认选中的值 } }) .catch(function (error) { // 请求失败处理 console.log(error); });},methods: {handleChange3(value) { console.log('选中id值',value); console.log('选中lable值',this.plable); var thsAreaCode = this.$refs.cascaderAddr.getCheckedNodes()[0].pathLabels;; //注意2： 获取label值 console.log('lable',thsAreaCode) // 注意3： 最终结果是个一维数组对象 var len=value.length-1; this.form.ranges_sguid=value[len];//这是最终修改后的要提交的选中后的数据值 console.log('guid',this.form.ranges_sguid); this.$refs.cascaderAddr.toggleDropDownVisible();// 选择之后将下拉界面收起 }}感谢各位的阅读!关于"如何实现elementui中的el-cascader级联选择器"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧!
