jxb-pro-ui v2.4.0

快速上手

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

Vue.use(Jxb)

Columns 列定义

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

额外扩展

示例

    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