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

ur home

于 2021-02-07 14:06:12 发布

阅读量594

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue2.x elementUI 文章标签： vue elementui 组件化

本文链接：https://blog.youkuaiyun.com/wz_coming/article/details/113740126

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

33 篇文章

订阅专栏

elementUI

7 篇文章

订阅专栏

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

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

此文章会介绍基于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>