Element 根据描述展示表单
时间:2022-07-25
本文章向大家介绍Element 根据描述展示表单,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
假如数据格式如下:
formData: [
{
title: "气密性测试",
param: [
{
mode: "检查方式1",
way: "单选",
required: "Y",
content: ["检漏仪", "u形管"],
value: "检漏仪"
},
{
mode: "检查方式2",
way: "多选",
required: "Y",
content: ["检漏仪", "u形管", "其他","另外"],
value: ["检漏仪", "u形管","其他"]
},
{
mode: "检查方式3",
way: "填空",
required: "Y",
content: "",
value: "result"
}
]
}
],
展示出的样子
<div v-for="(item,index) in formData" :key="index" class="formwrap">
<div class="title">{{item.title}}</div>
<el-form ref="form" label-width="100px">
<el-row :gutter="20">
<el-col :span="12" v-for="(item,index) in item.param" :key="index">
<el-form-item :label="item.mode">
<el-input v-if="item.way=='填空'" v-model="item.value" readonly></el-input>
<el-radio-group v-else-if="item.way=='单选'" v-model="item.value">
<el-radio v-for="(item,index) in item.content" :key="index" :label="item" disabled></el-radio>
</el-radio-group>
<el-checkbox-group v-else v-model="item.value">
<el-checkbox v-for="(item,index) in item.content" :key="index" :label="item" disabled></el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
单选框和复选框只读禁用的时候样式比较深,如果想改变禁用的样式
<style scoped>
.formwrap >>> .el-form-item {
margin-bottom: 0;
}
.formwrap >>> .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
background-color: #409eff;
border-color: #409eff;
}
.formwrap >>> .el-checkbox__input.is-disabled + span.el-checkbox__label {
color: #333;
}
.formwrap
>>> .el-checkbox__input.is-disabled.is-checked
.el-checkbox__inner::after {
border-color: #fff;
}
.formwrap >>> .el-radio__input.is-disabled.is-checked .el-radio__inner {
background-color: #409eff;
border-color: #409eff;
}
.formwrap >>> .el-radio__input.is-disabled + span.el-radio__label {
color: #333;
}
.el-radio__input.is-disabled.is-checked .el-radio__inner::after {
background-color: #fff;
}
</style>
- React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)
- 洛谷P2345 奶牛集会
- P2880 [USACO07JAN]平衡的阵容Balanced Lineup
- Python黑客编程3网络数据监听和过滤
- React第三方组件6(状态管理之Mobx的使用⑤异步操作)
- 机器学习(五)使用Python和R语言从头开始理解和编写神经网络介绍目录神经网络背后的直观知识多层感知器及其基础知识什么是激活函数?前向传播,反向传播和训练次数(epochs)多层感知器全批量梯度下降
- 洛谷P2251 质量检测
- React第三方组件6(状态管理之Mobx的使用④TodoList下)
- HDU 1536 S-Nim
- 洛谷P2723 丑数 Humble Numbers
- Python黑帽编程2.5 函数
- 洛谷P1317 低洼地
- ZOJ 3594 Sexagenary Cycle
- React第三方组件6(状态管理之Mobx的使用③TodoList中)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- ubuntu中python调用C/C++办法之动态链接库详解
- linux中使用boost.python调用c++动态库的办法
- 在Linux系统下上传项目到码云的办法
- PHP global全局变量经典应用与注意事项分析【附$GLOBALS用法对比】 原创
- Linux(Ubuntu 18.04)上安装Anaconda步骤详解
- php web环境和命令行环境下查找php.ini的位置
- PHP大文件分块上传功能实例详解
- Linux 命令行通配符及转义符的实现
- Python爬虫抓取指定网页图片代码实例
- PHP变量作用域(全局变量&局部变量)&global&static关键字用法实例分析
- CentOS 7 安装Chrome浏览器的方法
- PHP高级编程之消息队列原理与实现方法详解
- thinkphp5.1框架模板布局与模板继承用法分析
- Linux内核设备驱动之内存管理笔记整理
- Matplotlib 绘制饼图解决文字重叠的方法