复选框值为true和false,我这是默认为true,所有字段都显示,不勾选,则显示两个字段,根据if-else来控制,取值判断是否为true,true的话则显示,false则隐藏。
前端代码如下:
<template>
<div class="app-container">
<div class="mainbox">
<div class="table-container table-fullscreen">
<div class="table-opt-container">
<el-button
type="primary"
icon="el-icon-plus"
@click="handleAdd"
>新增
</el-button>
</div>
</div>
</div>
<dt-dialog :visible.sync="open">
<div slot="content">
<el-form ref="form" label-width="120px">
<el-form-item label="测试">
<el-checkbox v-model="checked">是否</el-checkbox>
</el-form-item>
</el-form>
<template v-if="checked">
<el-form ref="form" label-width="120px">
<el-form-item label="测试">
<el-input
maxlength="30"
show-word-limit
class="limit"
/>
</el-form-item>
</el-form>
</template>
<el-form ref="form" label-width="120px">
<el-form-item label="测试2">
<el-input
maxlength="30"
show-word-limit
class="limit"
/>
</el-form-item>
</el-form>
<template v-if="checked">
<el-form ref="form" label-width="120px">
<el-form-item label="测试3">
<el-input
maxlength="30"
show-word-limit
class="limit"
/>
</el-form-item>
</el-form>
</template>
<el-form ref="form" label-width="120px">
<el-form-item label="测试4">
<el-input
maxlength="30"
show-word-limit
class="limit"
/>
</el-form-item>
</el-form>
</div>
</dt-dialog>
</div>
</template>
<script>
export default {
name: 'WorkBench',
data() {
return {
open: false,
checked: true
}
},
methods: {
/** 新增按钮操作 */
handleAdd() {
this.open = true
}
}
}
</script>
<style scoped>
</style>
页面效果:
![](https://i-blog.csdnimg.cn/blog_migrate/c35ddfc610f39b947fa4746b123e373d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/39111fa95e17195bb2c0de9e2f42191a.png)