介绍

oibp-ui 基于element UI + Vue 构建以后台数据展现为主的前端组件，将常规数据逻辑进行内置封装，同时配合拦截器的设置，两者结合形成了灵活与统一的兼容的组件架构。

设计理念

1. 数据接口直接配置接口请求对象。如 promise对象
2. 每个接口配置均包含前、后置拦截，前置拦截处理参数，后置拦截处理返回数据
3. 参数可通过全局设置、页面单例设置两种方式，全局优先级低于单例

安装教程

1. 初始化安装

npm install oibp-ui

2. 使用

<template>
    <oibp-table-layout
      ref="tableLayout"
      :getHeader="getHeader"
      :getData="getData">
    </oibp-table-layout>
</template>

export default {
    name:"index",
    methods: {
        getHeader(){  //获取表格头部,一般可直接替换为封装好的promise函数
            let data = {
                "headers": [
                    {"fieldKey": "name","fieldLabel": "姓名"},
                    {"fieldKey": "age","fieldLabel": "年龄"},
                    {"fieldKey": "address","fieldLabel": "地区"}
                ]
            }
        return  this.$ToPromise(data)
        },
        getData(){    //获取表格内容,一般可直接替换为封装好的promise函数
            let data = {
                "rows": [
                    {"name": "张三","age": "25","address": "上海"},
                    {"name": "李四","age": "30","address": "北京"}
                ],
                "total":2
            }
            return  this.$ToPromise(data)
        }
    },
} 

参考文档

主要参数结构 如 表格功能配置项、表格字段配置项等，请参考文档：

https://1089try.com/oibp-ui/#/Home