element Cascader 级联选择器，选中样式回显处理

记录一下Cascader 级联选择器，手动选择时选中样式没有问题，但是从服务器获取保存数据赋值后出现的选择样式问题
html部分
emitPath：在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值，接口只需要选中节点值

<el-form-item label="分类" prop="classifyId" class="tree_select">
   <el-cascader
   :filterable="true"
   v-model="ruleForm.classifyId"
   :options="treeData"
   :props="defaultProps"
   :emitPath="false"
    @change="handleChange"
    ref="cascader"></el-cascader>
</el-form-item>

js部分

data(){
	return{
		  treeData: [], //分类多级数据
	      defaultProps: {
	        children: 'children',
	        label: 'classifyName',
	        value: 'classifyId',
	      },
      },
   mounted(){
   	if(this.id){
   		//获取编辑数据
   		//this.ruleForm.classifyId = 获取的数据
   		//获取分类全路径+选中样式
   		this.classifyIdChange(this.ruleForm.classifyId);
   	}
   },
   methods:{
    //分类改变
    classifyIdChange(val) {
      console.log(this.$refs.cascader.getCheckedNodes(), '选择节点', val);
      if (val) {
      //通过ref，获取选择的节点，getCheckedNodes(leafOnly)：leafOnly 是否只是叶子节点，默认值为 false
        let nodes = this.$refs.cascader.getCheckedNodes();
        this.ruleForm.classifyId=[]
        nodes[0].pathNodes.forEach((item) => {
          //选中回显样式关键
          this.ruleForm.classifyId.push(item.value);
        });
      } else {
        this.$set(this.ruleForm, 'classifyId', '');
      }
    },
    },
   }
}

注意！！！
由于处理编辑时的选中样式，this.ruleForm.classifyId的值变为了数组，提交数据时需要处理一下

if (Array.isArray(this.ruleForm.classifyId)) {
            //处理级联回显样式产生的数据问题(接口只传最后一级id)
            this.ruleForm.classifyId = this.ruleForm.classifyId[this.ruleForm.classifyId.length - 1];
          }