antDesignPro a-table样式二次封装

最新推荐文章于 2024-05-23 16:38:33 发布

静止呀

最新推荐文章于 2024-05-23 16:38:33 发布

阅读量1k

点赞数 14

分类专栏： Vue antd 文章标签： vue.js 前端 javascript anti-design-vue

本文链接：https://blog.csdn.net/qq_43145310/article/details/131729089

版权

Vue 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

antd

1 篇文章 0 订阅

订阅专栏

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>