Vue 关于el-cascader组件解决级联多选回显需求和部分TypeError: Cannot read property ‘level‘ of null问题

昨天遇到了回显的问题，在网上找了很多博客看，一直没看到重点，这里总结一下遇到的坑

● 级联组件< el-cascader >

以多选可搜索为例，配置如下关于属性，具体可以去看Vue的element组件官网

		<el-cascader
             placeholder="手动搜索标签:"
              v-model="tagInitData" // 绑定的值也可做默认值
              :options="tagData" // 预置选项
              :props="{
                multiple:true     // 可多选   
              }"
              :separator="':'" // 更改不同级之间的相连方式
              clearable
              filterable>
         </el-cascader>


 export default {
    name: 'AssetForm',
    props: {
      tagData: {
        type:Array,
        default: []
      },
      tagInitData: {
        type:Array,
        default:() => []
      },
      }
      }  

● 我这里要实现的是关于标签关联，通过后端将数据库中的所有标签和标签值传到前端，并转入到表单中的prop属性里，这里为tagData

● 这里对tagData数据有严格的要求，后端传来tagData必须是一个数组类型且是树形结构，每个节点默认情况下必须有label，value，children属性，其中children又是一个子节点。Java结构如下：

import lombok.Data;
import java.util.List;

@Data
public class TagTreeNode {
    private String value;
    private String label;
    private List<TagTreeNode> children;
}

● 这里label值就是在展示出来的标签的名字，value值可自定义，一般传入该标签的id

注：这里属性名必须设置成value，label（也可在组件属性中为value，label重命名解决属性名不同问题）否则传入到前端后会解析不出来相应的数据，在删除标签时前端还会报出TypeError: Cannot read property 'level' of null的错误

● 当用户选定好标签点击提交后传入到后端，后端所接收到的数据是一个二维数组，而这个二维数组中的内容如下所示

tag=[[91df0e18dc666560dfc40d612d495ee8, 46184124033d9e4bd025f0702231be1d], [edae09d469d8123e62b7e4e1e13a3ad5, 84a7cb62b3738f6f06c8f9b248b5ac9d], [edae09d469d8123e62b7e4e1e13a3ad5, 1c54e1f4e751b3203f4acd4bedc42ac0]]

这里的一大串字母就是之前我定义在value里面的标签id，并且按照顺序：

[[一级标签id，二级标签id]，[一级标签id，二级标签id]，[一级标签id，二级标签id]]

·

● 回显

● 需求：当用户在前端想对这条信息进行修改时，需要让之前已经选择过的标签回显在编辑页面上

这里级联选择器的回显必须用到v-model属性，因为v-model属性的值就是回显的默认值

而这里要进行回显时从后端将数据库中的数据传给前端并赋值给v-model属性，这里的数据也必须是二维数组的形式且也必须是以value值传入。

例如，我这里要进行回显要传给前端v-model的值就必须是如下这种形式

tag=[[91df0e18dc666560dfc40d612d495ee8, 46184124033d9e4bd025f0702231be1d], [edae09d469d8123e62b7e4e1e13a3ad5, 84a7cb62b3738f6f06c8f9b248b5ac9d], [edae09d469d8123e62b7e4e1e13a3ad5, 1c54e1f4e751b3203f4acd4bedc42ac0]]