結合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"
>
<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 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=https://www.cnblogs.com/shouke/p/value.replace(/[^/d]/g,'')"
/>
</el-form-item>
<span>個用戶，每隔</span>
<el-form-item prop="interval">
<el-input
v-model="loadSettingsForm.interval"
maxlength="4"
oninput="value=https://www.cnblogs.com/shouke/p/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=https://www.cnblogs.com/shouke/p/value.replace(/[^/d]/g,'')"
/>
</el-form-item>
<span>個用戶的速率增加</span>
<el-form-item prop="add">
<el-input
v-model="loadSettingsForm.add"
maxlength="2"
oninput="value=https://www.cnblogs.com/shouke/p/value.replace(/[^/d]/g,'')"
/>
</el-form-item>
<span>個用戶，直至增加到</span>
<el-form-item prop="targetUserCount">
<el-input
v-model="loadSettingsForm.targetUserCount"
maxlength="6"
oninput="value=https://www.cnblogs.com/shouke/p/value.replace(/[^/d]/g,'')"
/>
</el-form-item>
<span>個用戶</span>
</el-col>
</el-row>
</div>
<div v-else>
<el-row>
<el-col>
<span>按每秒啟動</span>
<el-form-item prop="spawnRate">
<el-input
v-model="loadSettingsForm.spawnRate"
maxlength="2"
oninput="value=https://www.cnblogs.com/shouke/p/value.replace(/[^/d]/g,'')"
/>
</el-form-item>
<span>個用戶的速率啟動</span>
<el-form-item prop="targetUserCount">
<el-input
v-model="loadSettingsForm.targetUserCount"
maxlength="6"
oninput="value=https://www.cnblogs.com/shouke/p/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=https://www.cnblogs.com/shouke/p/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=https://www.cnblogs.com/shouke/p/value.replace(/[^/d]/g,'')"
/>
</el-form-item>
<span>秒</span>
</el-col>
</el-row>
</div>
<div >
<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=https://www.cnblogs.com/shouke/p/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=https://www.cnblogs.com/shouke/p/value.replace(/[^/d]/g,'')"
/>
</el-form-item>
<span>到</span>
<el-form-item prop="iterationMaxWait">
<el-input
v-model="loadSettingsForm.iterationMaxWait"
maxlength="6"
oninput="value=https://www.cnblogs.com/shouke/p/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=https://www.cnblogs.com/shouke/p/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>
效果截圖
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270835.html
標籤：Html/Css
上一篇：CSS Flex一維布局