快速上手

import Jxb from 'jxb-pro-ui'
import 'jxb-pro-ui/lib/jxb-pro-ui.css'

Vue.use(Jxb)

Columns 列定义

• 新增了如果没有填写宽度自动计算宽度

额外扩展

| 属性 | 类型 | 描述 | 默认值 | | ---- | ---- | ---- | ---- | | ns | boolean | 不希望成为表单元素 | false | | nt | boolean | 不希望成为表头元素 | false | | sKey | string | 搜索时当做入参的字段，默认为key的值 | - | | sTitle | string | 表单元素的label，默认为title的值 | - | | formItemProps | object | formItem的Props，优先级最高 | - | | formItemElProps | object | 表单控件的props，比如input，优先级最高 | - | | enum | [boolean, array] | 自动枚举，详见下面 | - | | enumDic | array | select等元素的数据包，详见下面 | - | | kv | array | 远程请求select等元素的数据包的key，详见下面 | - | | request | function | select等元素的远程数据包，优先级大于enumDic，详见下面 | - | | detail | string | 针对单个按钮的语法题，详见下面 | - | | valueType | string | 表单控件类型，详见下面 | text |

示例

    const columns = [
        {
            title: '状态',
            key: 'status',
            enum: [0, 1]
        }
        // 如果enum为数组，那么页面的文字为默认的文字
        // 四种状态的颜色分别为view UI 的四种状态色，颜色目前不支持不支持自定义
        // 0 => 失败
        // 1 => 成功
        // 2 => 警告
        // 3 => 消息
    ]
    // ---------------------
    const columns = [
        {
            title: '状态',
            key: 'status',
            enum: {
                0: '吃饭',
                1: '睡觉'
            }
        }
        // 此时相应的枚举值就是吃饭和睡觉
    ]
    // -----------------------------
    const columns = [
        {
            title: '状态',
            key: 'status',
            valueType: 'select',
            enumDic: [{ code: 1, label: '成功' }, { code: 0, label: '失败' }]
        }
        // 这里需要注意的是，如果前端写死的字典,需要保证value为code,label为label
        // 除非使用下面的kv
    ]
    // ------------------------------
        const columns = [
        {
            title: '状态',
            key: 'status',
            valueType: 'select',
            kv: ['name', 'type'],
            request: () => {
                return new Promise(rs => {
                    rs('后端的字典')
                })
            }
        }
        // 后端如果没有统一value和label的key那么需要手动指定，kv的顺序为value为0，label为1
    ]
    // -------------------------------
        const columns = [
            {
                title: '状态',
                key: 'status',
                detail: '查看详情&detail&3'
            }
            // 这句代码等同于如下伪代码
            {
                title: '状态',
                key: 'status',
                render: (h, scoped) => {
                    const ls = '查看详情&detail&3'.split('&')
                    return <span color={ls[2]} onClick={$emit(ls[1], scoped)}>{ls[0]}</span>
                }
                // 最后会在最外层组件接受一个ls[1]的事件
                // <proTable @detail="xxx">
                // ls[2]的枚举和enum一样
                // 0 => 失败
                // 1 => 成功
                // 2 => 警告
                // 3 => 消息
            }
        ]

request

• 必须是一个异步函数(加上async),必须return
  • return的内容

      return {
          data: res.data,
          total: res.total
      }

formProps

• form组件的props，同view文档

tableProps

• table组件的props，同view文档

pageProps

• page组件的props，同view文档

gutter

• formItem的gutter默认为20

1.1

• 新增了props参数
  • immediate：是否需要初始化的时候执行查询，默认为true

1.2

• 新增了emit参数
  • emit: '组件的事件/你的事件'

1.4 - 1.5

• 修复了bug