element-ui 多级树形表格加多选的效果

实现多级表格加多选的效果
父级表格点击具有全选、全不选的功能，点击部分子级表格，父级表格实现半选中的状态

template页面展示部分：

<template>
  <div id="app">
    <el-table
      :data="renderDynamic"    //绑定表格数据
      ref="product"     //ref绑定表格
      border         //设置表格边框
      row-key="id"   //行数据的Key，用来优化Table的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问,详情见element-ui官网
      :row-class-name="rowClassNameFun"    //行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className
      :header-row-class-name="headerRowClassName"   //表头行的 className 的回调方法，也可以使用字符串为所有表头行设置一个固定的 className
      size="mini"     //Table 的尺寸
      max-height="500px"   //表格的最小高度
      style="width: 100%"  //表格的宽度
      @select="selectFun"   //当用户手动勾选数据行的 Checkbox 时触发的事件
      @select-all="selectAllFun"   //当用户手动勾选全选 Checkbox 时触发的事件
      :header-cell-style="{ background: '#fafafa' }" >    //表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="date" label="日期" sortable width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" sortable width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

data数据部分：

 data() {
   
    return {
   
      renderDynamic: [
        {
   
          id: 1,
          parentId: 0,
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
   
          id: 2,
          parentId: 0,
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          children: [
            {
   
              id: 3,
              parentId: 2,
              date: "2016-05-01",
              name: "王小虎",
              address: "上海市普陀区金沙江路 1519 弄",
              children: [
                {
   
                  id: 4,