封装element的table组件(含自动滚动并高亮显示)

尼克_张

已于 2022-11-13 22:38:48 修改

阅读量1.8k

点赞数 1

分类专栏：组件库文章标签： 1024程序员节

于 2021-10-24 21:57:25 首次发布

本文链接：https://blog.csdn.net/m0_48076809/article/details/120942090

版权

本文介绍了如何对Element的Table组件进行二次封装，创建名为common-table的组件。封装要点包括：通过props从父组件传递数据，利用sync修饰符处理值的变更，子组件通过事件与父组件通信，使用slot实现内容定制，以及在main.js中全局注册组件。

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

👨🏻‍🎓博主介绍：大家好，我是尼克.张，热爱分享知识，很高兴在这里认识大家🌟

🌈擅长领域：前端开发

🙏🏻如果本文章各位小伙伴们有帮助的话，🍭关注+👍🏻点赞+🗣评论+📦收藏，相应的有空了我也会回访，互助！！！

🤝另本人水平有限，旨在创作简单易懂的文章，在文章描述时如有错，恳请各位大佬指正，在此感谢！！！

element的表格是非常常用的组件，我们可以对它进行二次封装，方便我们在项目中更加简洁的使用。二次封装无外乎对同样的元素用for循环的形式表现，其次主要有以下几点：
1.父组件通过props把值传给子组件，如果子组件想要更改props中的值的话，最好是让父组件去修改值，如果子组件改变的话可以使用sync。参考vue组件之间通信
2.事件函数放在子组件中，子组件通过emit触发相应的事件，并传送对应的值给父组件去接收。
3.slot插槽的使用，比如自定义的内容，父组件传递给子组件自定义的内容。
4.全局注入组件，在main.js中导入组件，并使用Vue.component全局注入。

封装common-table组件

<template>
  <div>
    <el-table
      :data="data"
      :height="height"
      v-loading="loading"
      :header-cell-style="headerStyle"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      ref="table"
      highlight-current-row
      @mouseenter.native="mouseenter"
      @mouseleave.native="mouseleave"
      :row-class-name="tableRowClassName"
    >
      <el-table-column type="selection" width="50" align="center" v-if="isSelected" />
      <el-table-column label="序号" type="index" width="50" align="center">
        <template slot-scope="scope">
          <!-- 有分页时-->
          <span v-if="queryParams">{
  { (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
          <!-- 无分页时 -->