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-table
style="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>
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
相关推荐: 2023年第十六届山东省职业院校技能大赛中职组“网络安全”赛项规程
第十六届山东省职业院校技能大赛 中职组“网络安全”赛项规程 一、赛项名称 赛项名称:网络安全 英文名称:Cyber Security 赛项组别:中职组 专业大类:电子与信息大类 二、竞赛目的 网络空间已经成为陆、海、空、天之后的第五大主权领域空间,习总书记强调…