基于elementui表格二次封装，全局组件-一一网

1.首先明白第一步我们要达到什么样的效果，当然目的就是为了少写代码不用去改其他代码

2.我们需要用到什么技术：props,solt,event

废话不多说直接上table组件代码

<el-table
      v-loading="loading"
      class="my-table"
      ref="multipleTable"
      :height="height"
      :data="tableData"
      :row-key="rowKey"
      border
      :tree-props="treeProp"
      @selection-change="handleSelectionChange"
      @sort-change="headClick"
    >
<template v-for="(colConfig, index) in colConfigs">
        <!--          自定义列内容-->
        <el-table-column
          :label="colConfig.label"
          :key="colConfig.label"
          :prop="colConfig.prop"
          :sortable="colConfig.sort"
          :width="colConfig.width || '200px'"
          align="center"
          v-if="colConfig.slot"
        >
          <template slot-scope="scope">
            <slot :item="scope.row" :name="colConfig.slot"></slot>
          </template>
        </el-table-column>
        <el-table-column
          v-else
          v-bind="colConfig"
          :sortable="colConfig.sort"
          align="center"
          :key="'co' + index"
        ></el-table-column>
      </template>
      </el-table>
复制代码

下面我就直接讲上述自定义列内容那块我看全网也没多少人写这种的，所以我就写了哈哈
主要的数据在colconfigs上

父组件如下图

到了这里是不是知道这个组件的用法了，下面肯定会有人问，如果我要在列里面加一些其他东西了，不要急，我再来讲

<template slot-scope="scope">
            <slot :item="scope.row" :name="colConfig.slot"></slot>
          </template>
复制代码

你们仔细看上述这个代码在组件里面，这里预留了一个插槽，如果你需要插，我一定接着稳稳的
然后你们再看

这里是不是有个这个属性 solt 对应的value值就是我们传的插槽参数
下面我们直接来写个案例这是父组件

看到这里大家伙基本明白了如果插槽这种用法不清晰可以看下官网就清楚了

下面讲最后一个问题就是就是全局组件，怎么去注册这个东西

import AtTable from "./Table/index.vue";
const install = function(Vue) {
    [
        AtTable
    ].forEach(v => {
        Vue.component(v.name, v)
    })
}
export default {
    install,
   
}
然后在main.js上挂载
// 组件安装
import customUI from "@/components";
Vue.use(customUI)
复制代码