更改element-ui源码，控制tree组件每行是否显示选择框

修改源码的步骤：

1.github上下载element-ui源码

2.npm i下载依赖项。此处非常容易出错，和node的版本有关。本次主要是node-sass下载出错。使用的node是12版本，下载的node-sass是4.10版本。改成npm i node-sass@4.12单独下载node-sass后解决

3.修改源码。此次修改了elementui源代码tree/src/tree-node.vue

 

4.npm run dist，生成lib文件夹。

5.使用lib文件夹替换原项目中的lib。

在项目中使用修改后的tree时，data数据中添加noCheckBoxInLine，就可以控制选择框显示与否了。

Tree.vue

<template>
  <el-tree :data="data" show-checkbox node-key="id"> </el-tree>
</template>

<script>
let id = 1000;
export default {
  name: "tree",
  data() {
    const data = [
      {
        id: 1,
        label: "一级 1",
        showCheckbox: true,
        icon: "el-icon-user",
        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",
          },
        ],
      },
    ];
    return {
      data: JSON.parse(JSON.stringify(data)),
      data: JSON.parse(JSON.stringify(data)),
    };
  },
};
</script>

 App.vue

<template>
  <div>
    <!-- <Button /> -->
    <Tree />
  </div>
</template>

<script>
import Tree from "./components/Tree";
import Button from "./components/Button";

export default {
  components: { Button, Tree },
};
</script>

显示结果：

 此处这种设置，默认全部不显示选择框。当showCheckbox为true时本行显示

当tree组件本身属性show-checkbox为false时，showCheckbox无效，不显示选择框