ElementUI组件二次简单封装——el-table

       由于多个页面大量用到el-table,而el-table的中样式根本满足不了实际项目需要，需要大量修改样式，如果不封装的话，就需要改全局的样式，而改全局的样式又会面临其他的问题，比如李四增加了一个全局table样式，张三也用了table，一看发现样式被改了，张三想 我不要你这样的样式，我就要原生的样式的，我会自己改，我们团队就有此问题，所以就想到封装一个公共的控件 xx-table,这样谁用谁用谁引入，或者全局引入一下。

     本来想着网上找个现场的copy过来拿来用用，没想到网上的各种各样的，带分页的，带动态表头的，各种高级的功能，奈何我小白一个，高级功能用不到，最好参考网上的实现了一个简单的

XXtable.vue 这里的xx，我用的公司名字，自己的话改个喜欢的名字把

<template>
  <el-table
    :data="data"
    :height="height"
    :max-height="maxHeight"
    :stripe="stripe"
    :border="border"
    :header-cell-style="{background:'#047086','font-size':'18px','vertical-align':'center',padding:'0px',height:'60px'}"
    style="width: 100%;color: #FDFFFF;font-size:14px;margin: 10px 20px auto 0px"
    @selection-change="handleSelectionChange"
    @select="select"
  >
    <slot />
  </el-table>

</template>
<script>
export default {
  name: 'XXTable',
  props: {
    data: {
      default() {
        return []
      },
      type: Array
    },
    height: {
      type: [String, Number],
      default: '100%'
    },
    maxHeight: {
      type: [String, Number],
      default: '100%'
    },
    stripe: {
      default() {
        return false
      },
      type: Boolean
    },
    border: {
      default() {
        return false
      },
      type: Boolean
    }
  },

  watch: {
    //
  },
  mounted() {
    //
  },
  methods: {
    handleSelectionChange(val) {
      this.$emit('selection-change', val)
    },
    select(selection, row) {
      this.$emit('select', selection, row)
    }

  }
}
</script>

table里边的样式可以自定义，包括表头header-cell-style

用的时候就不用说了把，我这边是把公共组件都注册成全局的了

可以看vue官方教程 -基础组件的自动化全局注册

https://cn.vuejs.org/v2/guide/components-registration.html#%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6%E7%9A%84%E8%87%AA%E5%8A%A8%E5%8C%96%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C

 import xxTable from './xxTable '
 
    export default {
        data () {
            
        },
        
        components: {
            xxTable
        }
    };