elementui table二次封装

最新推荐文章于 2025-05-14 18:27:33 发布

原创

最新推荐文章于 2025-05-14 18:27:33 发布 · 321 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui

本文介绍了如何对ElementUI的Table组件进行二次封装，详细阐述了封装过程中的大致思路，并提到后续会有进一步的优化计划。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <el-table class="table" :data="tableData" border style="width: 100%" @row-click='jumpDetails'
      @selection-change="handleSelectionChange" empty-text row-key="id">

      <el-table-column align="center" v-if="multiple" type="selection" width="55"></el-table-column>

      <el-table-column :fixed="item.fixed" v-for="(item, index) in tableHeader" :key="index" :show-overflow-tooltip='item.tooltip' :sortable="item.sortable"
        :align="item.align" :header-align="item.headerAlign" :label="item.title" :min-width="item.width">
        <template slot-scope="scope">
          <!-- matchObj -->
          <span v-if="!item.hasOperating && !item.list">
            <span
              v-if="!item.date">{
  
  {item.matchObj ? item.matchObj[scope.row[item.attrName]] : scope.row[item.attrName]}}</span>
            <!-- 时间过滤 -->
            <span v-if="item.date">{