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

我不是女神ヾ 2022-10-29 01:43 299阅读 0赞

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

普通el-table

  1. <el-table
  2.       :data="tableData"
  3.       style="width: 100%">
  4.       <el-table-column
  5.         prop="date"
  6.         label="日期"
  7.         width="180">
  8.       </el-table-column>
  9.       <el-table-column
  10.         prop="name"
  11.         label="姓名"
  12.         width="180">
  13.       </el-table-column>
  14.       <el-table-column
  15.         prop="address"
  16.         label="地址">
  17.       </el-table-column>
  18.       <el-table-column
  19.         prop="address"
  20.         label="地址">
  21.       </el-table-column>
  22.       <el-table-column
  23.         prop="address"
  24.         label="地址">
  25.       </el-table-column>
  26.     </el-table>

封装后的table使用

  1. <op-table
  2.         ref="opTableRef"
  3.         :comTableData="tableData"
  4.         :tableColumn="tableColumn"
  5.         :tableOptions="tableOptions"
  6.         :loading="loading"
  7.         :reserveSelection="whetherBatch"
  8.         :rowKeys="getRowKeys"
  9.         :noDataState="noDataState"
  10.         @handleSelectionChange="handleSelectionChange"
  11.         @clickButton="clickButton">
  12.         <template v-slot:userName="{ customSlotName }">
  13.           <a class="fc-primary hover-fc_primary" 
  14.             href="javascript:;" 
  15.             @click="edit(customSlotName, true)">{
  16.    { customSlotName.userName}}</a>
  17.         </template>
  18.      </op-table>

发表评论

表情：
评论列表 （有 0 条评论，299人围观）

还没有评论，来说两句吧...

相关阅读