山东大学项目实训（九）—— 核心功能（6）

不良事件级别选择（树结构）

这个功能的实现，在当时花了笔者的不少功夫！因为不良事件级别是包含子级别的，详观下图。为什么包含子级别就很难实现呢？
答：笔者当时是真的不知道怎么实现，毫无头绪，并且UNI-APP 文档中也没有相应的组件，笔者压根想不到能用树结构来实现，主要是在以往的项目开发中，并没有用过树结构！了解得很少。

一、设计思路

在毫无头绪，无法实现该功能的时候，笔者在 DCloud 插件市场中，找到了类似的功能，并且他们称其为树组件！然后选了一个比较适合笔者的组件进行调用，但是里面的功能并不能完全满足笔者的需求，因此笔者修改了它的部分源码，进而满足笔者的需求 —— 当然这是后续需求，在这里并不影响。

二、实现方案

可以看到，笔者使用不了一个不再维护的树组件插件，笔者并没有自己实现该功能，只是调用了别人现成的组件到自己的项目中来。

三、功能实现难点

1. 拿到他人的组件，首先要看懂他人的树组件代码和文档，结合自身项目，进行参数修改。

2. 数据展示，因为笔者引用的树组件的接入数据和服务器返回的JSON数据格式完全不一致，需要通过JS进行数据对接。

四、应用介绍

1、第一个难点

<lis-tree show-checkbox :root="rankRoot" :expand="expand" :change-handler="changeHandler"
	:selected="formData.eventRank"></lis-tree>

主要属性介绍

• show-checkbox —— 源码里是展示多选框，但笔者修改了源码，将里面的参数改成了展示单选框。
• :root=“rankRoot” —— 绑定事件级别数据，包含子树。
• :expand=“expand” —— 绑定展开级别，用于展开有子树的父树。
• :selected=“formData.eventRank” —— 绑定选中的事件级别
• :change-handler=“changeHandler” —— 修改选择项时，显示选中的地方。

2、第二个难点

// 获取事件级别
async getEventRank() {
   
	let res = await