element-ui中el-cascader动态加载和默认值怎么使用

本文小编为大家详细介绍“element-ui中el-cascader动态加载和默认值怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“element-ui中el-cascader动态加载和默认值怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

首先el-cascader最常用的是显示省市区，所有省市区三四千项一下子加载出来总会有个卡顿的过程，所以我一般用动态加载，这个element的文档和例子很清楚了。

这是我代码中的一部分，尽可能的去掉了多余的代码

<el-cascader ref="areas" v-model="address.area_ids" 
:options="options" :props="props" separator="/" />

data() {
      return {
        options: [],
        address: {
          area: [],
          area_ids: [],
          value: '',
          lat: '',
          lng: ''
        },
        props: {
          lazy: true, //动态加载开关
          lazyLoad(node, resolve) { //动态加载函数
            const { level,value,label} = node;
            get("../city/get", {
              parentid: value
            }).then((res) => {
              if (res.state == 'success') {
                var data = res.data;
                data.map(item => {
                  item.leaf = item.child == "0" //leaf如果是true就结束了，意味着没有下一级
                  return item;
                })
                resolve(data);
              } else {
                resolve([]);
              }
            })
          }
        }
      }
    },

正常选择没问题。一般刚开始的options默认的是第一级的数组

最头疼的部分，在编辑表单时要显示出来前面已经选择过的项，也就是回显默认值，首先保证v-mode的值是长度是3的数组（结合情况，不一定非要是3），一定保证[省,市,区]顺序正确，我昨天大意写错了市的id，检查了一天没发现问题。

另外，既然要显示默认值，肯定也要给el-cascader一个默认的options,要保证是这种结构

[
	{
	'value':'1',
	'label':'河南',
	'leaf':false,//不带leaf，选项后面没有向右的箭头，下面的自行补充
	'children':[{
					'value':'11',
					'label':'郑州',
					'children':[
						{
							'value':'111',
							'label':'中原区'
						},
						{
							'value':'112',
							'label':'二七区'
						}
					]
				},{
					'value':'12',
					'label':'洛阳'
				}]
	},
	{
	'value':'2',
	'label':'河北',
	}
]

应该很清晰了，就是保证所选路径的上下级和平级数据完整，为什么要完整，因为还有下面一个问题。

在options处理完后，默认值应该就可以正常显示了。

但是当再更换地区市，选了一下“郑州”后发现，郑州的子级重复了（选“河南”也一样），这也好理解，说明是郑州的子级又加载了一遍并且填充到下级的选项组里了，新加载的和默认的重复了。这毕竟不完美，做程序员慢慢有了强迫症了，扒了扒element的源码，问题很好解决，只是element官方没有简单明了的说出来。

在处理完options和v-model后，要处理选中项的加载状态，否则还会重新加载一次。

//上面的代码自行补充
		this.$nextTick(_=>{
              var node=this.$refs.areas.getCheckedNodes(); //获取当前选中节点
              if(node&&node[0]&&node[0].pathNodes){//选中节点的所有父节点
                for(var i=0;i<node[0].pathNodes.length;i++){
                  node[0].pathNodes[i].loaded=true; //节点的加载状态设为true，就不会再加载了
                }
              }
            })

读到这里，这篇“element-ui中el-cascader动态加载和默认值怎么使用”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。