聊聊elementUI中的el-tree和el-table源码

缘起

---

小编其实不是很想写这个，因为源码有啥好些的，但是架不住粉丝的热情，所以就有了今天这篇。今天只有几段关键性的代码，带大家走走思路，剩下的就看大家自己玩了！

el-tree

---

先说个大菜el-tree，很多人可能觉得el-table才是大菜，但是小编这里想说，两者其实差不了多少，都是自己建个store，把相关数据存store，类似vuex，尤其el-table更明显。

我们直接拿官方文档上的下面这段代码来说话：

<div class="custom-tree-container">
  <div class="block">
    <p>使用 render-content</p>
    <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :render-content="renderContent">
    </el-tree>
  </div>
  <div class="block">
    <p>使用 scoped slot</p>
    <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{
  { node.label }}</span>
        <span>
          <el-button
            type="text"
            size="mini"
            @click="() => append(data)">
            Append
          </el-button>
          <el-button
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            Delete
          </el-button>
        </span>
      </span>
    </el-tree>
  </div>
</div>

<script>
  let id = 1000;

  export default {