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
        }
    };