佛山便宜网站建设,深圳外贸网站建设制作,政务服务 网站 建设方案,域名的申请及注册流程antDesignPro是跟element-ui类似的一个样式框架#xff0c;其本身就是一个完整的后台系统#xff0c;风格样式都很统一。我使用的是antd pro vue#xff0c;版本是1.7.8。公司要求使用这个框架#xff0c;但是UI又有自己的一套设计。这就导致我需要对部分组件进行一定的个性…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 classcom-table{ table }/div)},
};
/script
// 下面自定义表格样式
style langless scoped
/style对comTable组件进行全局注册路径components/globalComponents.js
// 全局组件注册
import comTable from ./comTable
const globalComponents {install (Vue) {Vue.component(comTable, comTable)}
}
export default globalComponentsmain.js中添加
// 公共UI组件
import globalComponents from /views/spmSystem/components/globalComponents
Vue.use(globalComponents)页面使用示例封装的comTable使用与a-table无异仅改变了样式方便表格样式的统一修改。 com-tablestylemargin:-10px 5px 0 5px :dataSourcedataSource :columnscolumnsThree sizesmall :paginationfalse :scroll{ x: 100%, y:170 }span slota slot-scopetext :style{color:(text 重大?red: ( text 较大?#F98C00FE:#D7B22EFE) )}{{ text }}/span/com-table
