element el-form表单同一行内多个元素

BaekZh

于 2024-04-08 11:47:49 发布

阅读量404

点赞数 5

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/BaekZh/article/details/137502481

版权

效果图：

代码：

<el-dialog :title="title" :visible.sync="open" center append-to-body width="1000px">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px" label-position="left">
        <el-row>
          <el-col :span="12">
            <el-form-item label="告警名称:" prop="alarmName" label-width="80px">
              <el-input v-model="form.alarmName" placeholder="请输入告警名"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="告警等级:" prop="alarmLevel" label-width="80px" style="margin-left: 10px">
              <el-select v-model="form.alarmLevel" style="width: 100%" placeholder="请选择告警等级" clearable>
                <el-option
                    v-for="dict in alarmLevelOption"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="开启状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio
                v-for="dict in dict.type.alarm_setting_status"
                :key="dict.value"
                :label="dict.value"
            >{{ dict.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="告警条件: 当" prop="compareDataTypeOne" label-width="108px">
              <el-select v-model="form.compareDataTypeOne"
                         placeholder="请选择对比数据类型1"
              >
                <el-option
                    v-for="dict in dict.type.alarm_setting_compare_data_type_one"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="与" label-width="25px" style="margin-left: 5px">
              <el-select v-model="form.compareDataTypeTwo"
                         placeholder="请选择对比数据类型2"
              >
                <el-option
                    v-for="dict in dict.type.alarm_setting_compare_data_type_two"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                    :disabled="form.compareDataTypeOne === dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="相差" label-width="40px" style="margin-left: 5px">
              <el-select v-model="form.compareSymbols" placeholder="请选择比较符">
                <el-option
                    v-for="dict in dict.type.alarm_setting_compare_symbols"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="" label-width="0px" style="margin-left: 5px">
              <el-input v-model="form.diffPercent" placeholder="请输入差值百分比"/>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label="%时，进行告警" label-width="120px" style="margin-left: 5px">
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item class="needSetting" label="计算公式: ABS((对比数据1-对比数据2)/额定容量)" label-width="100%">
        </el-form-item>
        <el-form-item label="生效电厂:" label-width="90px" prop="effectLedgerPowerStationIds">
          <div id="myChart" style="height: 300px;width: 95%;margin-left: 2.5%;">
            <el-transfer
                :titles="['电厂列表', '已选电厂']"
                @change="changeTranfer"
                style="width: 100%;margin-top: 30px"
                filterable
                filter-placeholder="请输入厂站"
                v-model="chooseStationIndexs"
                :data="data"
            >
            </el-transfer>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>