# 从对象列表页JS插件
和关联对象列表JS插件用法一致。
从对象列表页JS插件包含以下扩展场景:
- 控制从对象列表页渲染流程
- 修改字段展示
该组件只会出现在详情页的子组件,所以相关子组件插件的注册请移步详情页插件。
# 控制从对象列表页渲染流程
export default {
componentPlugns(context) {
return {
'multitable': {
beforeInitTable(options) {
// todo what you want
return options;
}
}
}
}
}
# 修改字段展示
let
export default {
componentPlugns(context) {
return {
'multitable': {
entry(context, field) {
return field.name === 'name' // 只考虑改变主属性的渲染
},
render(context, field, value) {
if (field.api_name === 'name') {
return `test: ${value}`
}
}
}
}
}
}
# 控制从对象列表页渲染流程
# beforeFetch()
参数:
context: Object
:字段的上下文环境param: Object
:调用从对象列表接口传递的参数
返回:
该方法需返回接口请求参数。
用法:
beforeFetch发生在接口之前。
{
beforeFetch: function(context, param) {
// todo what you want
param.aaa = 'test'; //追加请求数据
return param;
}
}
# beforeInitTable()
参数:
context: Object
:字段的上下文环境options: Object
:从对象列表组件初始化依赖的 属性
返回:
该方法需返回列表初始化依赖的属性数据
用法:
beforeInitTable发生在接口之前。
{
beforeInitTable: function(context, options) {
options.scrollLoad = false; //关闭水平方向的滚动加载
options.scrollLoadY = false; //关闭垂直方向的滚动加载
return options;
}
}
# 修改字段展示
# entry()
参数:
context: Object
:字段的上下文环境field: Object
:字段描述信息
用法:
入口方法,指使插件适用在哪些字段上。
# render()
参数:
context: Object
:字段的上下文环境field: Object
:字段描述信息value: *
:字段的值
返回:
需要返回一个DOM对象或者DOM字符串。
用法:
入口方法,指使插件适用在哪些字段上。
# 简单示例
let widgets = {};
{
entry(context, field) {
return field.api_name === 'name' || field.api_name === 'owner'
},
render(context, field, value, data) {
if (field.api_name === 'name') {
return `<div>hello fxiaoke</div>`; // 返回DOM字符串
}else if(field.api_name === 'owner') {
const key = `${data._id}-${field.api_name}`;
let vm = widgets[key];
if (vm) {
vm.$destroy();
}
vm = widgets[key] = new Vue({
render: h => h('div', {
on: {
click(e) {
e.stopPropagation(); //可以防止点击当前字段后打开详情页
}
}
}, [
value,
'测试'
])
}).$mount();
return vm.$el; //返回DOM对象
}
},
beforeDestroy() {
Object.keys(widgets).forEach(key => {
widgets[key].$destroy();
})
widgets = null;
}
}
注意:如果使用vue组件,请在 beforeDestroy
中和每一次 render
时进行 组件销毁,避免不必要的内存泄漏
# context
组件级别context具备详情页context中所有的 API。除此之外,还提供了下列方法:
# 通用API
# getCompInfo()
返回:
compInfo: Object
:组件的描述信息api_name: String
:组件的apiNameheader: String
:组件标题type: String
:组件类型- ... 除此之外,不同的组件具有各自特殊的信息(可以打印到控制台来查看)
用法:
该方法返回当前组件的描述信息。
const compInfo = context.getCompInfo();
console.log(compInfo.api_name);
console.log(compInfo.type);
# getObjectApiName()
返回:
objectApiName: String
:获取当前主对象的apiName
用法:
该方法获取当前主对象的apiName。
const objectApiName = context.getObjectApiName();
console.log(objectApiName);
# getObjectDataId()
返回:
objectDataId: String
:获取当前主对象的数据id
用法:
该方法获取当前主对象的数据id。
const objectDataId = context.getObjectDataId();
console.log(objectDataId);
# 表格组件属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
maxHeight | 最大高度限制 | number | — | — |
searchTip | 搜索输入框的提示信息 | string | — | — |
columns | 列配置 | array | — | — |
colMinWidth | 最小列宽 | number | — | — |
scrollLoad | 开启X轴滚动加载 | boolean | — | false |
scrollLoadY | 开启Y轴滚动加载 | boolean | — | false |
noDataTip | 无数据提示 | string | — | - |
initComplete | 表格渲染完成函数 | function | — | - |
showWaterMask | 是否显示水印 | boolean | — | false |
forceTrWrap | 强制换行 | boolean | — | true |
# columnItem
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
api_name | 字段apiName | string | — | — |
type | 字段类型 | string | — | — |
render | 字段渲染函数 | function | — | — |
width | 列宽度 | string | — | — |
title | 列表头名称 | string | — | — |
fixed | 是否固定 | boolean | — | — |
isFilter | 是否支持筛选 | boolean | — | false |
isOrderBy | 是否支持排序 | boolean | — | true |
# 常见示例
# 修改多行文本展示
表格在展示多行文本字段时,默认只展示一行内容,其余内容显示省略号。为了展示更多的内容,我们可以参考以下示例:
let widgets = {};
export default {
// 注册从对象列表插件
componentPlugns(context) {
let plugins = {};
// 找到所有从对象列表组件,并进行插件赋值
context.getComponentsByType('multi_table').forEach(item => {
plugins[item.api_name] = this.subPlugin
})
return plugins;
},
// 从对象列表插件内容
subPlugin: {
// 声明需要渲染的字段
entry(context, field) {
return field.type === 'long_text';
},
render(context, field, value, data){
if(field.type === 'long_text') {
let vm = widgets[data._id];
if (vm) {
vm.$destroy && (vm.$destroy());
}
vm = widgets[data._id] = new Vue({
render(h) {
return (
<div on-click={this._stopPropagation}>
<FieldDisplay field={{type:'long_text'}} value={value}></FieldDisplay>
</div>
)
},
components: {
FieldDisplay: FxUI.component.get('FieldDisplay') //字段渲染组件
},
methods: {
// 阻止事件冒泡,避免表格的行点击事件处理函数执行,影响客制化效果
_stopPropagation(e) {
e.stopPropagation();
}
}
}).$mount();
return vm.$el;
}
},
// 修改列表组件的配置,关闭滚动加载和打开换行。
beforeInitTable(context, options) {
console.log('插件操作beforeInitTable', context);
options.forceTrWrap = true;
options.scrollLoadY = false;
options.scrollLoad = false;
return options;
},
// vue组件销毁
beforeDestroy() {
console.log('插件操作beforeDestroy', context);
Object.keys(widgets).forEach(key => {
const comp = widgets[key];
comp.$destroy && (comp.$destroy());
})
}
}
}
类似修改列表字段渲染的需求都可以参考该示例。
← 详情页JS插件 关联对象列表页JS插件 →