AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

ElementUI FORM结合Vue实现横向排列表单项

2023-04-22 992
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： ElementUI FORM结合Vue实现横向排列表单项

结合Vue实现横向排列表单项

前言

默认的，ElementUI的Form表单项(控件)是垂直排列，即一行显示一个表单项。但是在实际应用中，有时候会需要一行显示多个表单项。针对这类需求，笔者提供以下解决方案

解决方案

1、修改表单项.el-form-item样式

如下，增加display属性，设置值为inline-block !important; 因为默认的，表单项为块元素，这样设置以后，可以让表单项变成内联元素，这样表单项就可以横向排列在一起了

.el-form-item {
  display: inline-block !important;
}

2、修改表单项.el-form-item__label样式

如下，设置display为none，即隐藏自带的表单项标签，然后设置width为0px !important;，避免被隐藏 标签继续占用空间

.el-form-item__label {
  display: none;
  width: 0px !important;
}

这样以后，使用<span>labelName</span>作为自定义标签项

3、修改表单项.el-form-item__content样式

如下，避免表单项在视觉上看上去两头占了很大空白

.el-form-item__content {
  margin-left: 3px !important;
  margin-right: 3px !important;
}

4、使用row和col组件控制哪些表单项归属同一行、同一列

应用举例

<el-form
    :model="loadSettingsForm"
    :rules="loadSettingsFormRules"
    ref="loadSettingsForm"
    label-width="100px"
    class="load-settings-form"
  >
    <el-row>
      <el-col>
        <span>场景名称</span>
        <el-form-item prop="name">
          <el-input v-model="loadSettingsForm.name" maxlength="50" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <span>是否梯度加压</span>
        <el-form-item>
          <el-radio v-model="loadSettingsForm.isSteppingPressure" :label="true">是</el-radio>
          <el-radio v-model="loadSettingsForm.isSteppingPressure" :label="false">否</el-radio>
        </el-form-item>
      </el-col>
    </el-row>
    <div class="el-form-row-wrapper" v-if="loadSettingsForm.isSteppingPressure">
      <el-row>
        <el-col>
          <span>初始启动</span>
          <el-form-item prop="initialUserNum">
            <el-input
              v-model="loadSettingsForm.initialUserNum"
              maxlength="2"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>个用户，每隔</span>
          <el-form-item prop="interval">
            <el-input
              v-model="loadSettingsForm.interval"
              maxlength="4"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>秒，</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>按每秒启动</span>
          <el-form-item prop="spawnRate">
            <el-input
              v-model="loadSettingsForm.spawnRate"
              maxlength="2"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>个用户的速率增加</span>
          <el-form-item prop="add">
            <el-input
              v-model="loadSettingsForm.add"
              maxlength="2"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>个用户，直至增加到</span>
          <el-form-item prop="targetUserCount">
            <el-input
              v-model="loadSettingsForm.targetUserCount"
              maxlength="6"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>个用户</span>
        </el-col>
      </el-row>
    </div>
    <div class="el-form-row-wrapper" v-else>
      <el-row>
        <el-col>
          <span>按每秒启动</span>
          <el-form-item prop="spawnRate">
            <el-input
              v-model="loadSettingsForm.spawnRate"
              maxlength="2"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>个用户的速率启动</span>
          <el-form-item prop="targetUserCount">
            <el-input
              v-model="loadSettingsForm.targetUserCount"
              maxlength="6"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>个用户</span>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row>
        <el-col>
          <el-radio
            v-model="loadSettingsForm.loadRunMode"
            :label="1"
            style="margin-right:0px"
          >每个用户运行</el-radio>
          <el-form-item prop="iterationNumEachUser">
            <el-input
              v-model="loadSettingsForm.iterationNumEachUser"
              maxlength="18"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>次</span>
          <el-radio
            v-model="loadSettingsForm.loadRunMode"
            :label="2"
            style="margin-left:20px; margin-right:0px;"
          >持续运行</el-radio>
          <el-form-item prop="holdLoadTime">
            <el-input
              v-model="loadSettingsForm.holdLoadTime"
              maxlength="18"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>秒</span>
        </el-col>
      </el-row>
    </div>
    <div class="el-form-row-wrapper">
      <el-row>
        <el-col>
          <span>在开始下一轮迭代之前</span>
          <el-form-item style="width:80px">
            <el-radio v-model="loadSettingsForm.iterationWaitModel" :label="1">固定等待</el-radio>
          </el-form-item>
          <el-form-item prop="iterationWaitTime">
            <el-input
              v-model="loadSettingsForm.iterationWaitTime"
              maxlength="6"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>秒</span>
          <el-form-item style="width:110px">
            <el-radio
              v-model="loadSettingsForm.iterationWaitModel"
              :label="2"
              style="margin-left:30px"
            >随机等待</el-radio>
          </el-form-item>
          <el-form-item prop="iterationMinWait">
            <el-input
              v-model="loadSettingsForm.iterationMinWait"
              maxlength="6"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>到</span>
          <el-form-item prop="iterationMaxWait">
            <el-input
              v-model="loadSettingsForm.iterationMaxWait"
              maxlength="6"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>秒</span>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <span>最后每秒停止</span>
          <el-form-item prop="stopRate">
            <el-input
              v-model="loadSettingsForm.stopRate"
              maxlength="2"
              oninput="value=value.replace(/[^\d]/g,'')"
            />
          </el-form-item>
          <span>个用户</span>
        </el-col>
      </el-row>
    </div>
    <el-row>
      <el-col>
        <span>迭代模式</span>
        <el-form-item>
          <el-radio v-model="loadSettingsForm.iterationMode" :label="1">用例串行</el-radio>
          <el-radio v-model="loadSettingsForm.iterationMode" :label="2">用例权重</el-radio>
          <el-radio v-model="loadSettingsForm.iterationMode" :label="3">用例随机</el-radio>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      loadSettingsForm: {
        name: "",
        host: "",
        isSteppingPressure: false, // 是否梯度加压 true-是 否-false
        loadRunMode: 1, // 运行方式 1-按次数运行 2-按时间运行
        initialUserNum: 10,
        interval: 180,
        spawnRate: 5,
        add: 10,
        targetUserCount: 1,
        holdLoadTime: 1800,
        stopRate: 5,
        iterationNumEachUser: 1,
        iterationWaitModel: 1, // 1-固定等待 2-随机等待
        iterationWaitTime: 0,
        iterationMinWait: 0,
        iterationMaxWait: 5,
        iterationMode: 1 //迭代模式 1 - 用例串行 2 - 用例权重 3 - 用例随机
      },
      loadSettingsFormRules: {
        name: [{
          required: true, trigger: "blur", message: "此配置项必填"
        },
        { min: 1, max: 50, message: "长度在 1 到 50 个字符", trigger: "blur" }
        ],
        targetUserCount: [
          { required: true, message: "此配置项必填", trigger: "blur" }
        ],
        spawnRate: [{ required: true, message: "此配置项必填" }],
        iterationNumEachUser: [
          {
            required: this.loadSettingsForm.loadRunMode == 1,
            message: "此配置项必填",
            trigger: "blur"
          }
        ],
        holdLoadTime: [
          {
            required: !(this.loadSettingsForm.loadRunMode == 1),
            message: "此配置项必填",
            trigger: "blur"
          }
        ],
        stopRate: [
          {
            required: true,
            message: "此配置项必填",
            trigger: "blur"
          }
        ]
      }
    };
  },
  watch: {
    "loadSettingsForm.loadRunMode": {
      handler(newValue, oldValue) {
        this.loadSettingsFormRules.iterationNumEachUser[0].required = !this
          .loadSettingsFormRules.iterationNumEachUser[0].required;
        this.loadSettingsFormRules.holdLoadTime[0].required = !this
          .loadSettingsFormRules.holdLoadTime[0].required;
        this.$nextTick(() => {
          this.$refs.loadSettingsForm.clearValidate();
        })
      },
    },
    "loadSettingsForm.isSteppingPressure": {
      handler(newValue, oldValue) {
        this.$nextTick(() => {
          this.$refs.loadSettingsForm.clearValidate();
        })
      },
    }
  }
};
</script>
<style lang="scss">
.load-settings-form {
  padding-right: 20px;
  padding-left: 20px;
  .el-form-item__label {
    display: none;
    width: 0px !important;
  }
  .el-form-item__content {
    margin-left: 3px !important;
    margin-right: 3px !important;
  }
  .el-form-item {
    display: inline-block !important;
  }
  .el-form-row-wrapper {
    .el-form-item__content {
      width: 85px;
    }
  }
}
</style>

效果截图


文章标签：
JavaScript
关键词：
elementui VUE.js
elementui表单项VUE.js
vue表单项VUE.js
elementui form VUE.js
form VUE.js
授客
目录
相关文章
34789737
|
4月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中，兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线，大型项目建议使用Pinia等状态管理工具，确保数据流清晰可控，避免内存泄漏。
34789737
372 2
哇塞女孩
|
3月前
|
缓存 JavaScript
vue中的keep-alive问题（2）
vue中的keep-alive问题（2）
哇塞女孩
341 137
谢妹纸
|
7月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
谢妹纸
860 0
我们是幸福一家人
|
7月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
我们是幸福一家人
381 82
rvblio6ca4cug
|
6月前
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎，秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」，成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构，实现设计到代码全流程自动化，效率提升300%，助力企业降本增效，引领“设计即生产”新时代。
rvblio6ca4cug
500 1
34789737
|
6月前
|
JavaScript 安全
在 Vue 中，如何在回调函数中正确使用 this？
在 Vue 中，如何在回调函数中正确使用 this？
34789737
320 0
34789737
|
7月前
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件，包括基础与高级示例。组件支持分段配置（如颜色、文本）、动画效果及超出进度提示等功能。同时提供了完整的代码实现，支持全局注册，并提出了优化建议，如主题支持、响应式设计等，帮助开发者更灵活地集成和定制进度条组件。资源链接已提供，适合前端开发者参考学习。
34789737
520 17
34789737
|
7月前
|
JavaScript 前端开发 UED
Vue 表情包输入组件实现代码及详细开发流程解析
这是一篇关于 Vue 表情包输入组件的使用方法与封装指南的文章。通过安装依赖、全局注册和局部使用，可以快速集成表情包功能到 Vue 项目中。文章还详细介绍了组件的封装实现、高级配置（如自定义表情列表、主题定制、动画效果和懒加载）以及完整集成示例。开发者可根据需求扩展功能，例如 GIF 搜索或自定义表情上传，提升用户体验。资源链接提供进一步学习材料。
34789737
320 1
34789737
|
7月前
|
存储 JavaScript 前端开发
如何高效实现 vue 文件批量下载及相关操作技巧
在Vue项目中，实现文件批量下载是常见需求。例如文档管理系统或图片库应用中，用户可能需要一次性下载多个文件。本文介绍了三种技术方案：1) 使用`file-saver`和`jszip`插件在前端打包文件为ZIP并下载；2) 借助后端接口完成文件压缩与传输；3) 使用`StreamSaver`解决大文件下载问题。同时，通过在线教育平台的实例详细说明了前后端的具体实现步骤，帮助开发者根据项目需求选择合适方案。
34789737
640 0
34789737
|
7月前
|
JavaScript 前端开发 UED
Vue 项目中如何自定义实用的进度条组件
本文介绍了如何使用Vue.js创建一个灵活多样的自定义进度条组件。该组件可接受进度段数据数组作为输入，动态渲染进度段，支持动画效果和内容展示。当进度超出总长时，超出部分将以红色填充。文章详细描述了组件的设计目标、实现步骤（包括props定义、宽度计算、模板渲染、动画处理及超出部分的显示），并提供了使用示例。通过此组件，开发者可根据项目需求灵活展示进度情况，优化用户体验。资源地址：[https://pan.quark.cn/s/35324205c62b](https://pan.quark.cn/s/35324205c62b)。
34789737
316 0