二次封装 element-ui里面的table

vue文件

<template>
  <div class="cloud_table">
    <el-table
      :data="tableData"
      :border="border"
      :row-class-name="tableRowClassName"
      :show-overflow-tooltip="showOverflowTooltip"
      header-cell-class-name="header_table"
      @select="checkTable"
      @select-all="checkAllTable"
      @sort-change="sortTable"
      ref="elTable"
    >
      <el-table-column v-if="isRadio" label width="50">
        <template slot-scope="scope">
          <el-radio v-model="radio_id" :label="scope.row.id" @change="clickChange(scope.row)">
            <em></em>
          </el-radio>
        </template>
      </el-table-column>

      <el-table-column v-if="isCheck" type="selection" width="55" />

      <el-table-column
        v-for="(item, index) in tableColumn"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :min-width="110"
        :sortable="item.sortable"
        :show-overflow-tooltip="true"
        :key="index"
      >
        <template slot-scope="scope">
          <slot :item="item" :scope="scope">
            <span>{
   {
    scope.row[item.prop] || "-" }}</span>
          </slot>
        </template>
      </el-table-column>

      <slot name="options"></slot>
      <el-table-column v-if="options.length > 0" :width="optionsWidth" label="操作" align="center" fixed="right">
        <template slot-scope="row">
          <template v-for="(item, i) in options">
            <span :class="{ division: i !== options.length - 1 }" class="blue" @click="item.method(row.row)" :key="i">
              {
   {
    item.name }}
            </span>
          </template>
        </template>
      </el-table-column>
      <template #empty>
        <slot name="empty">
          暂无数据
        </slot>
      </template>
    </el-table>
    <div v-if="tablePage.total" class="pagination_cloud">
      <div class="total">{
   {
    tablePage.total }} 条记录 第 {
   {
    tablePage.current }} /
        {
   {
    Math.ceil(tablePage.total / tablePage.size) }}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值