关于Element table组件二次封装（render函数）以及相关事项（如何使用插槽）

最新推荐文章于 2024-04-16 13:56:02 发布

原创

最新推荐文章于 2024-04-16 13:56:02 发布 · 1.1k 阅读

标签

#笔记

收录于

本文介绍了前端开发者如何二次封装饿了么UI库的Table组件，通过使用Render函数提高代码的简洁性和可维护性。详细讲解了组件封装过程，包括基于Render函数的实现，如何定义表格列名数组，以及如何利用插槽功能进行自定义。同时，针对不熟悉Render函数的读者，推荐了一篇关于Vue Render函数的详解文章，旨在帮助开发者更好地理解和应用。

大家好，我是程序员三生，对前端来说做后台管理系统每次cv table也是一个费眼睛和精力的事情，代码看起来不美观，臃肿冗杂。近来新做一个项目，分享一下我二次封装的饿了么 table组件，方便大家开发和维护，希望对大家有所帮助。

1.该组件封装基于render函数，所以需要先注册函数组件（如图），大家可以根据项目实际情况定义表格列名数组，可勾选和序号可以像我一样直接写，也可以放在数组里循坏（数组需要加一个定义type的字段）

<el-table
   @selection-change="handleSelectionChange"
   :data="tableData"
   stripe
   v-loading="loading"
   style="width: 100%"
    >
     <el-table-column v-if="isSelection" type="selection" width="55" />

     <el-table-column align="center" label="序号" type="index" width="50" />

     <el-table-column
        v-for="(item, index) in labelData"
        :key="index"
        align="center"
        v-bind="item"
      >
        <template v-if="item.render" v-slot="scope">
          <!-- 使用函数式组件进行dom渲染 -->
          <render-dom :render="() => item.render(scope.row)"></render-dom>
        </template>
      </el-table-column>
</el-table>