antDesignPro是跟element-ui類似的一個樣式框架，其本身就是一個完整的后臺系統，風格樣式都很統一。我使用的是antd pro vue，版本是1.7.8。公司要求使用這個框架，但是UI又有自己的一套設計。這就導致我需要對部分組件進行一定的個性化封裝。
對antdesign vue的a-table進行二次封裝：新建路徑 components/comTable/index.vue
<script>
export default {name: 'com-table',props: {dataSource: Array,columns: Array},render () {const on = {...this.$listeners}const props = { ...this.$attrs, ...this.$props, ...{ dataSource: this.dataSource, columns: this.columns }}// slots循環const slots = Object.keys(this.$slots).map(slot => {return (<template v-slot={slot}>{ this.$slots[slot] }</template>)})const table = (<a-table props={props} scopedSlots={ this.$scopedSlots } on={on}>{slots} </a-table>)return (<div class="com-table">{ table }</div>)},
};
</script>
// 下面自定義表格樣式
<style lang="less" scoped>
</style>
對comTable組件進行全局注冊：路徑：components/globalComponents.js
// 全局組件注冊
import comTable from './comTable'
const globalComponents = {install (Vue) {Vue.component('comTable', comTable)}
}
export default globalComponents
main.js中添加
// 公共UI組件
import globalComponents from '@/views/spmSystem/components/globalComponents'
Vue.use(globalComponents)
頁面使用示例，封裝的comTable使用與a-table無異，僅改變了樣式，方便表格樣式的統一修改。
<com-tablestyle="margin:-10px 5px 0 5px" :dataSource="dataSource" :columns="columnsThree" size="small" :pagination=false :scroll="{ x: '100%', y:170 }"><span slot="a" slot-scope="text" :style="{color:(text == '重大'?'red': ( text == '較大'?'#F98C00FE':'#D7B22EFE') )}">{{ text }}</span></com-table>
