封装el-table 基于element封装可配置JSON表格组件

基于element封装可配置JSON表格组件
话不多说直接贴代码,复制运行即可查看效果

子组件全部代码

<template>
  <div class="custom-table">
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      size="mini"
      max-height="800"
      v-bind="$attrs"
      v-on="$listeners"
      highlight-current-row
    >
      <template v-for="item in config.column">
        
        <template v-if="item.type === 'handler'">
          <el-table-column
            :key="item.prop"
            v-bind="item"
            align="center"
            fixed="right"
          >
            <template slot-scope="{ row }">
              <el-button
                v-for="btn in item.btns"
                :key="btn.label"
                type="text"
                @click="handelClick($event, btn.click, row)"
                :icon="btn.icon"
              >
                
              el-button>
            template>
          el-table-column>
        template>
        
        <template v-else-if="item.type === 'custom'">
          <el-table-column :key="item.prop" v-bind="item" align="center">
            <template slot-scope="scope">
              <slot :name="item.slotName" v-bind="scope" :prop="item.prop" />
            template>
          el-table-column>
        template>
        
        <template v-else>
          <el-table-column
            :key="item.prop"
            v-bind="item"
            align="center"
            :show-overflow-tooltip="true"
          />
        template>
      <

你可能感兴趣的:(前端,json,javascript,开发语言,vue.js,前端,elementui,前端框架)