# 值转换
控制入值和输出值的转换
场景:当外部值不是表单所需要的数据或类型时(比如: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值,主要是看组件怎么实现。
- 当是函数写法时,