前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Element 根据描述展示表单

Element 根据描述展示表单

作者头像
一只图雀
发布2020-09-21 10:47:51
9040
发布2020-09-21 10:47:51
举报
文章被收录于专栏:图雀社区

假如数据格式如下:

代码语言:javascript
复制
      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"
            }
          ]
        }
      ],

展示出的样子

代码语言:javascript
复制
    <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>

单选框和复选框只读禁用的时候样式比较深,如果想改变禁用的样式

代码语言:javascript
复制
<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>
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-09-14,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 图雀社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档