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

最新推荐文章于 2024-01-05 18:05:12 发布

ur home

最新推荐文章于 2024-01-05 18:05:12 发布

阅读量550

点赞数 2

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

本文链接：https://blog.csdn.net/wz_coming/article/details/113740126

版权

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

33 篇文章 4 订阅

订阅专栏

elementUI

7 篇文章 0 订阅

订阅专栏

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