element-UI中使用树组件el-tree实现左侧勾选右侧列表展示并且列表删除某一项左侧树菜单（父子联动）取消相应勾选

<el-tree
     :data="data"
      show-checkbox
      node-key="id"
      ref="tree"
      :props="defaultProps"
      @check="hanldTreeCheck"
      default-expand-all
    >
</el-tree>

<div>
   <p>已选数据</p>
    <ul>
        <li v-for="(m, i) in checkList" :key="i">
            <p>{{m.label}}</p>
            <i class="el-icon-close remove-icon" @click="tagClose(m,i)"></i>
        </li>
    </ul>
</div>

data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1"
                },
                {
                  id: 10,
                  label: "三级 1-1-2"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1"
            },
            {
              id: 8,
              label: "二级 3-2"
            }
          ]
        },
        {
          id: 14,
          label: "一级 4",
          children: [
            {
              id: 91,
              label: "二级 4-1"
            },
            {
              id: 101,
              label: "二级 4-2"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 常用已选择人员lis
      checkList: [],

 // 当tree 复选框被点击的时候触发
    hanldTreeCheck() {
      // 获取已选择树形节点
      // getCheckedNodes 接收两个 boolean 类型的参数，1. 是否只是叶子节点，默认值为 false 2. 是否包含半选节点，默认值为 false
      let list = this.$refs.tree.getCheckedNodes(false, false);
      // 赋值
      this.checkList = list;
    },

    // 子组件点击“关闭”按钮触发
    tagClose(item, index) {
      // 在已选中项的下标中删除
      this.checkList.splice(index, 1);
      // 在tree树控件中更改选中状态.
      //setChecked  接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中 3. boolean 类型，是否设置子节点 ，默认为 false
      this.$refs.tree.setChecked(item.id, false, true);
      // 重新计算已选中树形节点
      this.hanldTreeCheck();
    }

主要就是最后点击关闭的时候 设置树形结构多选框状态的参数 第三个参数传true 就能保持父级联动效果了， 最后重新拿到已选中的树形节点数据就ok了，记录一下这个小坑。