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

最新推荐文章于 2024-08-24 17:24:25 发布

小鬼难缠

最新推荐文章于 2024-08-24 17:24:25 发布

阅读量2k

点赞数 1

文章标签： elementui vue.js node.js

本文链接：https://blog.csdn.net/zjscy666/article/details/119938248

版权

本文介绍了elementUI中el-tree和el-table的源码实现，探讨了它们的数据存储机制和渲染过程。el-tree通过建立store管理和渲染节点，el-table则结合el-table-column使用全局store存储数据。通过对源码的分析，揭示了两者在vue框架下的工作原理。

摘要由CSDN通过智能技术生成

缘起

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

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 {