描述:
- 以数值为判断标准,要求值类型必须为数字,即1为true,0为false。
- 以指定的值为判断标准,用全等的方式判断显示隐藏。
1、HTML
<div class="box">
<el-form>
<template v-for="(item, index) in list">
<el-form-item :key="index" :label="item.title" v-if="showJs(item.showJs)">
<el-radio-group v-model="form[item.model]" v-if="item.type === 'radio'">
<el-radio v-for="(m, n) in item.option" :key="n" :label="m.value">{{ m.label }}</el-radio>
</el-radio-group>
<el-input v-model="form[item.model]" v-if="item.type === 'input'"></el-input>
</el-form-item>
</template>
</el-form>
</div>
2、DATA
data(){
return{
list: [
{
title: '是否展示',
model: 'isShow',
type: 'radio',
option: [
{ label: '是', value: 1 },
{ label: '否', value: 0 },
],
showJs: ''
},
{
title: '姓名',
model: 'name',
type: 'input',
option: [],
showJs: 'return form.isShow'
},
{
title: '年龄',
model: 'age',
type: 'input',
option: [],
showJs: 'return !form.isShow'
},
{
title: '分类显示',
model: 'isSort',
type: 'radio',
option: [
{ label: '一', value: '一' },
{ label: '二', value: '二' },
{ label: '三', value: '三' },
],
showJs: ''
},
{
title: '一类',
model: 'one',
type: 'input',
option: [],
showJs: 'return form.isSort === "一"'
},
{
title: '二类',
model: 'two',
type: 'input',
option: [],
showJs: 'return form.isSort === "二"'
},
{
title: '三类',
model: 'three',
type: 'input',
option: [],
showJs: 'return form.isSort === "三"'
},
],
form: {
isShow: 1,
name: '檀木',
age: 10,
isSort: '一',
one: '111',
two: '222',
three: '333'
}
}
}
3、MEYHODS
methods: {
showJs(str) {
let flag = true;
if (str) {
let fn = new Function('form', str);
flag = fn(this.form);
} else {
flag = true;
}
return flag;
}
}