js自定义列表属性

按钮

模型说明

模型列表默认按钮

[
    { id: 'add', name: '新增', type: 'primary', poritity: 5, },
    { id: 'edit', name: '修改', type: 'primary', poritity: 10, position: 'bottom' },
    { id: "view", name: '查看', type: 'primary', poritity: 15, position: 'row' },
    { id: 'delete', name: '删除', type: 'secondary', poritity: 40, position: 'page, bottom' },
]

• 1. 清空所有按钮

export default {
    buttons: [],
}

• 2. 隐藏部分默认按钮

export default {
    buttons: [
        {
            id: 'view',
            /* 
                1. 直接赋值
                2. 支持函数
             */
            isHide: true,
            // isHide: () => true,
        }
    ]
}

• 3. 添加自定义按钮

export defaut {
    buttons: [
        {
            id: 'cus-btn',
            name: '自定义按钮',
            click: function () {
                console.log('i am cus button!')
            }
        }
    ]
}

• 4. 按钮位置

属性	可选值	描述
position	'row'	点击行(页面不显示)
	'right'	行数据右侧(左滑)
	'bottom'	行数据底部
	'page'	页面

export default {
    buttons: [
        {
            id: 'row',
            name: '点击行触发',
            position: 'row'
        },
        {
            id: 'right',
            name: '行数据右侧(左滑)',
            position: 'right'
        },
        {
            id: 'bottom',
            name: '行数据底部',
            position: 'bottom'
        },
        {
            id: 'page',
            name: '页面下方加号内',
            position: 'page'
        },
        {
            id: 'meantime',
            name: '可同时多个位置',
            position: 'right page'
        }
    ]
}

• 5. 按钮主题

主题说明

按钮主题可选值取决于按钮位置值

export default {
    buttons: [
        {
            id: 'cus1',
            position: 'bottom',
            type: 'primary', // 可选值：primary secondary
        },
        {
            id: 'cus2',
            position: 'right',
            type: 'primary', // 可选值：primary warning success danger secondary
        }
    ]
}

列表展现形式

属性	可选值	描述
styleList	'0'	独占一行布局
	'1'	两栏卡片布局

export default {
    styleList: '1'
}

列表数据接口

export default {
    dataUrl: function () {
        // 返回自定义接口地址
        return `/xxx/xxxxxx/xxxxxx.do`
    },
}

修改请求前参数

export default {
    paramsBeforeRequest: function (params) {
        // 此处可自定义调整请求前的参数
        // params.xxx = xxx
        return params
    },
}

注意

必须return修改完的参数params回去

启动分页

export default {
    // 默认为true: 开启
    isUsePagination: false // 关闭分页，一次性加载
}

获取列表后

export default {
    afterListJSON: function (data) {
        // do something for data
        // 操作完数据之后注意必须将数据返回return
        return data
    },
}

注意

必须return修改完的列表数据data回去

渲染列表后

export default {
    afterListRender: function (data) {
        console.log('列表渲染后需要执行的事件：afterListRender')
    },
}

是否隐藏搜索框

export default {
    // 默认为false，不隐藏
    // 若配置搜索框隐藏，则搜索过滤器也必然隐藏
    hideSearch: true, // 设置为隐藏
}