vue+element table的二次封装

iTable.vue文件

<template>
  <div>
    <el-table
      :data="data"
      :show-header="showHeader"
      :border="border"
      :max-height="maxHeight"
      :v-loading="loading"
      :class="className"
      element-loading-text="给我一点时间"
      stripe
      fit
      highlight-current-row
      style="width: 100%"
    >
      //使用template 顺序不乱
      <template v-for="colConfig in colConfigs">
        //slot 添加自定义配置项
        <slot
          v-if="colConfig.slot"
          :name="colConfig.slot"
        ></slot>
        //component 特殊处理某一项
        <component
          v-else-if="colConfig.component"
          :is="config.component"
          :col-config="colConfig"
        ></component>
        <el-table-column
          v-else
          v-bind="colConfig"
          align="center"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </template>

    </el-table>
  </div>
</template>
<script>
export default {
  name: 'iTable',
  props: {
    colConfigs: {
      type: Array,
      default: function() {
        return [];
      }
    },
    data: {
      type: Array,
      default: function() {
        return [];
      }
    },
    showHeader: {
      type: Boolean,
      default: true
    },
    border: {
      type: Boolean,
      default: true
    },
    maxHeight: {
      type: [String, Number],
      default: null
    },
    loading: {
      type: Boolean,
      default: false
    },
    className: {
      type: String,
      default: ""
    }
  }
};
</script>

<style scoped>
</style>

在组件中使用

先引入组件 

import iTable from "@/components/i-table";

注册组件

components: { iTable }

使用

html代码

      <iTable :data="userList" :col-configs="colConfigs" row-key="id">

        <el-table-column slot="sex" label="性别">
          <template slot-scope="scope">
            {{scope.row.sex === 0 ? "男" : "女"}}
          </template>
        </el-table-column>
        <el-table-column slot="operate" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
            <el-button type="text" size="small" @click="deleteUser(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </iTable>

script代码

    colConfigs: [
        
        { slot: "operate" },
        { prop: "name",label: "姓名" },
        { slot: "sex" },
        { prop: "birth", label: "出生日期" },
        { prop: "age", label: "年龄" },
        { prop: "addr", label: "地址" },
        
      ],

就可以使用了