vue2+TS 基于elementui的table封装的业务组件

最新推荐文章于 2024-09-13 21:49:55 发布

原创最新推荐文章于 2024-09-13 21:49:55 发布 · 621 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui #组件化

vue2.x 同时被 2 个专栏收录

33 篇文章

订阅专栏

elementUI

7 篇文章

订阅专栏

本文详细介绍了如何将El-Table组件进行封装，以便在项目中更高效地管理和复用，包括自定义列、槽位、交互和状态管理。通过实例演示了如何使用op-table组件替代普通表格，并展示如何配置列属性和事件处理。

此文章会介绍基于el-table、我是如何进行业务组件封装的。

普通el-table

    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>

封装后的table使用

     <op-table
        ref="opTableRef"
        :comTableData="tableData"
        :tableColumn="tableColumn"
        :tableOptions="tableOptions"
        :loading="loading"
        :reserveSelection="whetherBatch"
        :rowKeys="getRowKeys"
        :noDataState="noDataState"
        @handleSelectionChange="handleSelectionChange"
        @clickButton="clickButton">
        <template v-slot:userName="{ customSlotName }">
          <a class="fc-primary hover-fc_primary" 
            href="javascript:;" 
            @click="edit(customSlotName, true)">{{ customSlotName.userName}}</a>
        </template>
     </op-table>