纷享销客开发者手册

简体中文

English

list.render.before

约 1374 字大约 5 分钟

2025-12-16

该钩子在渲染对象表格之前调用。 列表渲染前执行额外的动作，包含且不限于以下功能：

  • 自定义筛选器

参数

参数说明类型可选值默认值
通用参数详见Object——

返回结果

参数说明类型默认值
columnsExtendConfig列扩展配置Object--
filterExtendConfig筛选扩展配置Object--
termExtendConfig场景扩展配置Object--
imageExtendConfig图片字段扩展配置Object--
viewInfoExtendConfig视图扩展配置Object--
actionExtendConfig按钮扩展配置Object--
formatListDataAsync格式化listData（List接口返回的数据）Function--
formatRequestParam格式化List接口请求参数Function--
forceTrWrap列表单元格是否强制换行显示Boolean--
allSummaryFields列表页所有页汇总统计字段Array--
summaryFields列表页当前页汇总统计字段Boolean--
enableLiveFiltering列表筛选是否启用实时搜索Boolean--

columnsExtendConfig

参数说明类型默认值
filterColumns过滤表格展示的字段，同时影响表格设置和筛选Array--
render单元格自定义渲染配置Object--
showLookupTextlookup字段是否只显示文本（只显示文本意味着不可点击）Booleanfalse

columnsExtendConfig.render

参数说明类型默认值
字段渲染函数Function--

filterExtendConfig

参数说明类型默认值
字段的筛选配置Object--

filterExtendConfig.

参数说明类型默认值
disabled禁用筛选功能（即该字段不支持筛选）Boolean--
onlyOr需保留的操作符Array--
components不同操作符对应的筛选字段组件Object--
filterOptions过滤单选字段/多选字段类型的选项Function--
defaultCompare默认操作符Number--

termExtendConfig

参数说明类型默认值
default默认展示的场景，需要传筛选场景idString--
retain需保留的场景，需要传筛选场景idArray--

imageExtendConfig

参数说明类型默认值
图片字段的相关配置Object--

imageExtendConfig.

参数说明类型默认值
previewWidth鼠标hover到图片字段是预览大图的宽度number0
previewHeight鼠标hover到图片字段是预览大图的高度number200

actionExtendConfig

参数说明类型默认值
列表右上角按钮配置（注意action大小写，可以通过控制台打印获取）Object--

actionExtendConfig.

参数说明类型默认值
parseParam格式化按钮执行时的参数Function--

formatRequestParam

基础示例

export default class Plugin {
    apply() {
        return [{
            event: "list.render.before",
            functional: this.renderBefore.bind(this)
        }];
    }
    renderBefore() {
        const formatRequestParam = (data) => {
            const search_query_info = JSON.parse(data.search_query_info);

            if (!search_query_info.filters) {
                search_query_info.filters = [];
            }

            // 追加自定义的筛选条件
            search_query_info.filters.push({
                field_name: 'name',
                field_values: ['value'],
                operator: 'LIKE'
            })

            data.search_query_info = JSON.stringify(search_query_info);

            return data;
        };
        return Promise.resolve({
            formatRequestParam
        })
    }
}

allSummaryFields

参数说明类型默认值
type固定值sumString--
field_name字段apiNameString--
api_name由type和field_name拼接而成，$type_$field_nameString--

summaryFields

参数说明类型默认值
type固定值sumString--
field_name字段apiNameString--

示例

控制列表不显示某列数据

export default class Plugin {
    apply() {
        return [{
            event: "list.render.before",
            functional: this.renderBefore.bind(this)
        }];
    }
    renderBefore() {
        return Promise.resolve({
            columnsExtendConfig: {
                filterColumns: ['name'], // 过滤主属性字段，使列表不显示主属性列
            }
        })
    }
}

自定义某一列单元格显示内容

export default class Plugin {
    apply() {
        return [{
            event: "list.render.before",
            functional: this.renderBefore.bind(this)
        }];
    }
    renderBefore() {
        return Promise.resolve({
            columnsExtendConfig: {
                render: {
                    // 自定义负责人列的显示内容
                    owner: (value, type, data, format, index, field) => { 
                    	return 'Hello, Fxiaoke';
                    }
                }
            }
        })
    }
}

字段不支持筛选

export default class Plugin {
    apply() {
        return [{
            event: "list.render.before",
            functional: this.renderBefore.bind(this)
        }];
    }
    renderBefore() {
        return Promise.resolve({
            filterExtendConfig: {
                name: {
                	disabled: true //主属性不支持筛选
                },
                field_0N8Yi__c: {
                    disabled: true //主属性不支持筛选
                }
            }
        });
    }
}

过滤筛选器中某个字段支持的操作符

export default class Plugin {
    apply() {
        return [{
            event: "list.render.before",
            functional: this.renderBefore.bind(this)
        }];
    }
    renderBefore() {
        return Promise.resolve({
            filterExtendConfig: {
                name: {
                	onlyOr: [1, 3] // 需保留的操作符
                }
            }
        });
    }
}

自定义列表筛选器中操作符对应的筛选字段

selectfield.vue

<template>
    <fx-input v-model="value">
</template>
<script>
	export default {
        data(){
            return {
                value: ''
            }
        }
    }
</script>

plugin.js

import SelectFieldOptions from "./selectfield.vue";
const SelectField = Vue.extend(SelectFieldOptions);

class FilterComp {
    constructor(options){
        this.options = options;
        this.vm = new SelectField({});
    }
    // 表格渲染筛选时会调用此方法
    render(){
        this.vm.$mount();
      	this.options.el.get(0).appendChild(this.vm.$el);
    }
    // 表格设置默认筛选值是会调用此方法
    setValue(value) {
        this.vm.value = value;
    }
    // 表格进行筛选时会调用此方法
    getValue() {
        return this.vm.value;
    }
    // 表格进行清除筛选时会调用此方法
    clean() {
        this.vm.value = '';
    }
    // 表格进行销毁时会调用此方法
    destroy() {
        if (this.vm) {
            this.vm.destroy();
            this.vm = null;
        }
    }
}

export default class Plugin {
    apply() {
        return [{
            event: "list.render.before",
            functional: this.renderBefore.bind(this)
        }];
    }
    renderBefore() {
        return Promise.resolve({
            filterExtendConfig: {
                name: {
                	components: {
                        1: FilterComp
                    }
                }
            }
        });
    }
}

过滤列表筛选器中单选字段/多选字段类型的选项

export default class Plugin {
    apply() {
        return [{
            event: "list.render.before",
            functional: this.renderBefore.bind(this)
        }];
    }
    renderBefore() {
        return Promise.resolve({
            filterExtendConfig: {
                field_0N3ax__c: {
                	filterOptions(options) { // 此处过滤单选字段/多选字段类型的选项
                        return options.filter(
                            (a) => ["91jGaF8hn", "A5137BeV2"].indexOf(a.value) > -1
                        );
                    }
                }
            }
        });
    }
}

设置默认筛选场景并保留部分筛选场景

export default class Plugin {
    apply() {
        return [{
            event: "list.render.before",
            functional: this.renderBefore.bind(this)
        }];
    }
    renderBefore() {
        return Promise.resolve({
            termExtendConfig: {
                default: '5d0c806a7cfed91f3e95ba8e', // 默认展示的场景
                retain: ['5d0c806a7cfed91f3e95ba8e', '5d0c806a7cfed91f3e95ba90', '5d0c806a7cfed91f3e95ba8f'] // 需保留的场景
            }
        })
    }
}

设置图片字段预览尺寸

export default class Plugin {
    apply() {
        return [{
        event: "list.render.before",
        functional: this.renderBefore.bind(this)
        }];
    }
    renderBefore() {
        return {
            // 图片字段扩展配置
            imageExtendConfig: {
                // 扩展图片字段：imageFieldApiName 是图片字段的apiName
                [imageFieldApiName]: { 
                    previewWidth: 400,
                    previewHeight: 400
                },
                field_0N8Yi__c: {
                    previewWidth: 500,
                    previewHeight: 500
                }
            },
        }
    }
}

扩展列表右上角按钮执行时的参数

export default class Plugin {
    apply() {
    	return this.getHooks();
    }

    getHooks() {
        return [{
            event: 'list.render.before',
            functional: this.listRenderBefore.bind(this)
        }];
    }

    listRenderBefore(context, hookParam) {
        return {
            // 1.如何扩展列表右上角按钮执行时的参数
            actionExtendConfig: {
                // 扩展新建按钮
                add: {
                    parseParam: (data) => ({
                        // 重写add action参数中的recordTypeFilter属性
                        recordTypeFilter: [record_apiname]
                    })
                }
            }
        };
    }    
}

常见问题

Q: 通过formatListDataAsync修改数据列表的请求参数，为什么翻页不更新第二页的数据？

A: 请检查formatListDataAsync函数中，是否使用了limit、offset等参数，如果使用了，请将这些参数移除。