element-ui封装 el-table el-pagination

components 文件夹 创建 MyTable
MyTable 下 index .vue
方法一 使用插槽的方式
方法二 使用 render 方式

<template>
  <div id="commonTable">
    <!-- :max-height="maxHeight" -->
    <el-table
      v-bind="$attrs"
      v-on="$listeners"
      :data="data"
      tooltip-effect="light"
    >
      <!--region 选择框-->
      <el-table-column v-if="isSelection" type="selection"> </el-table-column>

      <!--新增操作栏-->
      <el-table-column v-if="isAction" label="操作" fixed="left">
        <template slot-scope="{ row, $index }">
          <slot :rowInfo="{ row, $index }" name="action"></slot>
        </template>
      </el-table-column>

      <!-- 方法二 -->
      <el-column
        v-bind="$attrs"
        v-for="(item, index) in columns"
        :key="index"
        :column="item"
      >
      </el-column>

      <!--  方法一 -->
      <!-- <el-table-column
        v-for="item in columns"
        :key="item.prop"
        :label="item.label"
        :min-width="item.minWidth"
        :fixed="item.fixed"
        :align="item.align"
        :type="item.type"
      >

        <template slot-scope="{ row, $index }">
          {{ !$scopedSlots[item.prop] ? row[item.prop] : "" }}
          <slot
            :rowInfo="{ row, $index }"
            :name="item.prop"
            v-if="$scopedSlots[item.prop]"
          ></slot>
        </template>

      </el-table-column> -->
    </el-table>
    <!-- @size-change="handleSizeChange"
      @current-change="handleCurrentChange" -->
    <el-pagination
      v-if="isPagination"
      v-bind="$attrs"
      v-on="$listeners"
      style="margin-top: 20px; text-align: right;"
    ></el-pagination>
  </div>
</template>

<script>
import ElColumn from "./el-column";
export default {
  name: "MyTable",
  components: {
    ElColumn
  },
  props: {
    data: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    isSelection: {
      type: Boolean,
      default: false
    },
    isPagination: {
      type: Boolean,
      default: true
    },
    isAction: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  mounted() {
    // console.log(this.rowKey, "表格组件", this.$scopedSlots);
    // 没有在 props 写接收才看得到
    console.log(this.$attrs, "表格组件", this.$listeners);
  },
  methods: {}
};
</script>

el-column .vue

<template>
  <el-table-column
    v-bind="$attrs"
    :key="column.prop"
    :label="column.label"
    :min-width="column.minWidth"
    :fixed="column.fixed"
    :align="column.align"
    :type="column.type"
  >
    <template slot-scope="scope">
      <el-render :scope="scope" :render="column.render"> </el-render>
    </template>
  </el-table-column>
</template>

<script>
import ElRender from "./el-render";
export default {
  name: "ElColumn",
  components: {
    ElRender
  },
  props: {
    column: Object
  },
  data() {
    return {
      prop: this.column.prop
    };
  },
  mounted() {
    console.log(this.$attrs, "表格组件子项", this.column);
  },
  watch: {
    column: {
      handler() {
        this.setColumn();
      },
      immediate: true
    }
  },
  methods: {
    setColumn() {
      if (!this.column.render) {
        this.column.render = (h, scope) => {
          return <span>{scope.row[this.prop]}</span>;
        };
      }
    }
  }
};
</script>

el-render.vue

<script>
export default {
  name: "ElRender",
  functional: true,
  props: {
    scope: Object,
    render: Function
  },
  render: (h, ctx) => {
    // console.log(ctx.props.scope, "什么上下文", ctx);
    return ctx.props.render ? ctx.props.render(h, ctx.props.scope) : "";
  }
};
</script>

index.js 全局注册组件

import MyTable from "./MyTable";

export default Vue => {
  // 注册组件
  // 使用Vue.component()注册组件时,全局id自动作为组件的名称
  // 也就是说,此时第一参数为组件的名称
  Vue.component("my-table", MyTable);
};

main.js

import components from './components/index.js';

Vue.use(components);

组件使用
其他参数按照 element-ui 组件标注

<my-table
  v-loading="loading"
  v-bind="{ ...tableData, data: list }"
  :current-page.sync="page"
  :page-sizes="[10, 20, 30, 40]"
  :page-size.sync="per_page"
  :total="total"
  rowKey="id"
  border
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  @selection-change="handleSelectionChange"
  layout="total,  prev, pager, next, sizes, jumper"
  style="width: 100%;margin-top: 20px;"
>
  <template v-slot:action="slotData">
    <el-button @click="del(slotData.rowInfo)" size="small"
      >删除</el-button
    >
  </template>
  <!--  方法一 -->
  <!-- <template v-slot:type="slotData">
    <el-button @click="del(slotData.rowInfo)" size="small"
      >删除</el-button
    >
  </template> -->
</my-table>

// 数据示例
tableData: {
  isSelection: true,
  // isAction: true,
  // data: this.list,
  columns: [
    {
      // fixed: true,
      type: "expand",
      // 方法二 render 方式
      render: (h, scope) => {
        return <span>{scope.row.type}</span>;
      }
    },
    {
      prop: "id",
      label: "ID",
      minWidth: 260,
      // fixed: true,
      align: "center"
    }
    // {
    //   prop: "type",
    //   label: "类型"
    // },
  ]
}

参考:lb-element-table

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,366评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,521评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,689评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,925评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,942评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,727评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,447评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,349评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,820评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,990评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,127评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,812评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,471评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,017评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,142评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,388评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,066评论 2 355

推荐阅读更多精彩内容

  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 3,240评论 1 22
  • element ui Table 二次封装 表格的分页 在利用element ui Table编写项目时,会存在表...
    NingWei阅读 4,969评论 3 2
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,214评论 0 6
  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,154评论 0 1
  • 经历春运座位荒 没座也敢把上车 无奈行李无处放 抱着大箱和小箱 汗味烟臭满车厢 憋的人心直发慌 十余小时历练后 还...
    神于天圣于地阅读 189评论 0 0