使用ElementUI树形控件el-tree实现复杂读写操作

需求 动态数据遍历tree
– 只有叶子节点展示复选框
– 非叶子节点通过字段动态展示特别提醒按钮/建议按钮
点击按钮显示特别提醒/建议内容
– 读操作
叶子节点展示历史催记数据
叶子节点 提供可折叠/展示历史催记数据按钮
– 写操作
叶子节点勾选后展示文本框编辑当前催记

实现效果：

写催记效果

读催记效果

代码如下：
页面

<template>
  <!-- 
  需求 动态数据遍历tree
  --只有叶子节点展示复选框
  --非叶子节点通过字段动态展示特别提醒按钮/建议按钮
    点击按钮显示特别提醒/建议内容
 --读操作
   叶子节点展示历史催记数据
   叶子节点 提供可折叠/展示历史催记数据按钮
  --写操作
  叶子节点勾选后展示文本框编辑当前催记 
 -->

  <div id="app">
    <div style="text-align: right">
      <el-switch v-model="isWrite" active-text="写催记" inactive-text="读催记">
      </el-switch>
    </div>
    <el-tree
      :data.sync="treeData"
      :show-checkbox="isWrite"
      node-key="id"
      :expand-on-click-node="false"
      default-expand-all
      :props="defaultProps"
      @check="boxCheck"
    >
    <!-- 显示催记历史按钮快捷键 -->
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span @click="() => nodeClick(data, node)">{
  { node.label }}</span>
        <span>
          <el-button
            v-popover="'popover-0-' + data.$treeNodeId"
            type="text"
            size="mini"
          >
            <span class="btnRemarkNum">
              {
  { getHistorData(data).remarkList.length }}</span
            >
          </el-button>
          <el-popover
            :ref="'popover-0-' + data.$treeNodeId"
            placement="right"
            :title="node.label"
            width="200"
            trigger="click"
          >
            <div class="box">
              <div
                v-for="(item, index) in getHistorData(data).remarkList"
                :key="index"
                class="mark"
                style="margin-bottom: 10px"
              >
                <span style="display: inline-block; padding-bottom: 3px"
                  ><i
                    class="el-icon-time"
                    style="color: #409eff; font-weight: 500; padding: 0 5px"
                  ></i
                  >{
  { item.createDatetime }}</span
                >
                <span style="display: inline-block"
                  ><i
                    class="el-icon-wallet"