# 值转换
控制入值和输出值的转换
场景
:当外部值不是表单所需要的数据或类型时(比如:el-switch的值是一个boolean值,但是后台保存的是0/1),此时就需要做转换
值转换
有两种形式写法:
枚举
: (推荐)函数
: ---
字段(见行高亮
):
propName: {
label: "label名称",
properties: {
status: {
label: "名称",
component: "el-switch",
format: [ // 枚举写法:写成一个数组[{outer和inner一一对应}]
{
outer: 0, // 表单输出的值或设置时用的值
inner: false // 转换为表单内部的值
},
{
outer: 1,
inner: true
}
],
value: false
},
isOpen: {
label: "状态",
component: "el-switch",
format: { // 函数写法:写成一个对象{outer函数, inner函数}
outer: value => { // 从外部值转化为内部值
if (value == 0) {
return false;
} else {
return true;
}
},
inner: value => { // 从内部值转化为外部值
if (value == true) {
return 1;
} else {
return 0;
}
}
},
value: 1
}
// ... 其它项
}
}
# 实例
# 枚举写法
写成一个数组,每一项是一个对象,对象属性包含outer
和inner
,它们是一一对应的。
outer
: 表单输出的值或设置时用的值inner
: 转换为表单内部的值
# 函数写法
写成一个对象,format中包含两个属性outer
和inner
,这两个属性是一个函数,至少写一个。
outer
: 外部数据转换为表单内部数据的函数,参数value就是外部值inner
: 表单内部数据转换为外部数据的函数,参数value就是内部值
注意
- 只有在组件项(叶子节点)中有效;
- 当是函数写法时,
inner
所值入的参数value就是表单组件的值,这个值要进行健壮性判断。比如: 表单组件有值的情况返回一个数组,没有值的情况返回一个空数组,也有可能返回null值,主要是看组件怎么实现。
- 当是函数写法时,