element ui 封装Table组件

1.首先npm i element-ui -S 安装element-ui

2.引入 Element

在 main.js 中写入以下内容：

import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) });

3.封装公共组件

<!-- CustomTable.vue -->
<template>
  <el-table :data="tableData" style="width: 100%" stripe v-loading="isLoading">
    <template v-for="column in columns">
      <el-table-column v-if="!column.useSlot" :key="column.prop" :prop="column.prop" :label="column.label" align="center" :min-width="column.minwidth" :fixed="column.fixed"></el-table-column>
      <el-table-column v-else :key="column.prop + 1" :prop="column.prop" :label="column.label" align="center" :min-width="column.minwidth" :fixed="column.fixed">
        <template slot-scope="scope">
          <slot :name="column.prop" :scope="scope"></slot>
        </template>
        <template slot="header" v-if="column.header">
          <slot :name="column.prop + 'header'"></slot>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    isLoading: {
      type: Boolean,
      default: false
    }
  }
}
</script>

4.全局注册

Vue.component('Table', Table)

5.使用

<Table :table-data="tableData" :columns="tableColumns"></Table>

tableData 传入数据

tableColumns传入表头

例如

tableColumns： [

 { prop: 'name', label: '名称', useSlot: false, minwidth: '120px'},

]