复选框值为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://www.toymoban.com/news/detail-822838.html
页面效果：文章来源地址https://www.toymoban.com/news/detail-822838.html
到了这里，关于element ui根据复选框控制字段显示和隐藏的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
