首页
视频
资源
登录
原
element ui 表单 表单元素在竖着布局的基础上横向布局横向显示,一行显示多个
323
人阅读
2024/3/4 16:24
总访问:
577554
评论:
0
收藏:
0
手机
分类:
前端
效果如下主要是这一排的: ![](https://img.tnblog.net/arcimg/notebook/3ef5d5b61a204fb5b16c75aedbc58d6d.png) (tip:截图里边右边没有对齐,应该是这里截图的时候调试后的造成的,实际情况是对齐的) 一排要显示多个只需要在el-form-item中嵌套使用el-col就行了,官方文档关于表单里边的文档就有这种用法 ``` <el-form-item label="校区"> <el-col :span="11" style="padding-right: 10px;"> <el-select v-model="addFormData.ignoreTeachers" multiple filterable clearable="" placeholder="请选择校区" style="width: 100%;" class="select-level" size="small"> </el-select> </el-col> <el-col class="line" :span="2" style="font-weight: 700;">阶段</el-col> <el-col :span="11"> <el-select multiple filterable clearable="" placeholder="请选择阶段" style="width: 100%;" class="select-level" size="small"> </el-select> </el-col> </el-form-item> ``` **这里有两个注意的点** 第一个就是两个选择框的间距问题,只需要在第一个el-col设置一下`padding-right`即可,不能用margin-right,这样会顶到下一行去了。 ``` <el-col :span="11" style="padding-right: 10px;" ``` 还有就是那个阶段两个字默认不是左边那种描述的颜色,加上一个`font-weight`样式就可以保持一样了 **贴一段这段布局的完整代码** ``` <template> <div class="app-container"> <el-form ref="sendMesssageToStudentsRef" style="margin-top: 0px;" :model="addFormData" :rules="sendMesssageToStudentsRules" label-width="113px"> <el-form-item label="校区"> <el-col :span="11" style="padding-right: 10px;"> <el-select v-model="addFormData.ignoreTeachers" multiple filterable clearable="" placeholder="请选择校区" style="width: 100%;" class="select-level" size="small"> </el-select> </el-col> <el-col class="line" :span="2" style="font-weight: 700;">阶段</el-col> <el-col :span="11"> <el-select multiple filterable clearable="" placeholder="请选择阶段" style="width: 100%;" class="select-level" size="small"> </el-select> </el-col> </el-form-item> <el-form-item label="消息内容" prop="messageContent"> <el-input v-model="addFormData.messageContent" placeholder="请输入消息内容" type="textarea" :rows="4" autocomplete="off" /> </el-form-item> <el-form-item label="提醒级别" prop="sysReminderLevel"> <el-radio-group v-model="addFormData.sysReminderLevel"> <el-radio :label="1">一般</el-radio> <el-radio :label="2">紧急</el-radio> <el-radio :label="3">非常紧急</el-radio> </el-radio-group> </el-form-item> <el-form-item label="跳转方式" prop="messageType"> <el-radio-group v-model="addFormData.messageType"> <el-radio :label="1">文本</el-radio> <el-radio :label="2">href跳转</el-radio> <el-radio :label="3">路由跳转</el-radio> </el-radio-group> </el-form-item> <el-form-item v-if="addFormData.messageType == 2" label="href地址" prop="hrefPath"> <el-input v-model="addFormData.hrefPath" placeholder="例如:/#/prodedu/works-library?mt=0&pt=0" autocomplete="off" /> </el-form-item> <el-form-item v-if="addFormData.messageType == 3" label="路由地址" prop="routerPath"> <el-input v-model="addFormData.routerPath" placeholder="例如:/user/index/myposition" autocomplete="off" /> </el-form-item> <el-form-item> <el-button type="primary" class="formButtonRight" @click="sendMesssageToStudents">确定</el-button> </el-form-item> </el-form> </div> </template> <script> export default { // 组件名字 name: 'VideoItem', // 组件参数 props: { percentage: { type: Number, default: 0 }, title: { type: String, default: '' }, }, data() { var validateRouterPath = (rule, value, callback) => { if (this.addFormData.messageType === 3) { if (value === '') { callback(new Error('路由跳转地址不能为空')) } } callback() } var validateHrefPath = (rule, value, callback) => { if (this.addFormData.messageType === 2) { if (value === '') { callback(new Error('href跳转地址不能为空')) } } callback() } return { courseID: '', labId: '', chapter: {}, addFormData: { messageContent: '', messageType: 1, hrefPath: '', routerPath: '', ignoreTeachers: [], choiseTeachers: [], ignoreStudents: [], choiseStudents: [], sysReminderLevel: 2 }, sendMesssageToStudentsRules: { messageContent: [{ required: true, message: '消息内容不能为空!', trigger: 'blur' }], choiseStudents: [ { required: true, message: '请选择学生', trigger: 'change' } ], routerPath: [ { validator: validateRouterPath, trigger: 'blur' } ], hrefPath: [ { validator: validateHrefPath, trigger: 'blur' } ] }, } }, mounted() { }, // 组件方法 methods: { sendMesssageToStudents() { } } } </script> <style scoped="scoped" lang="scss"></style> ```
欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739
👈{{preArticle.title}}
👉{{nextArticle.title}}
评价
{{titleitem}}
{{titleitem}}
{{item.content}}
{{titleitem}}
{{titleitem}}
{{item.content}}
TeachingNote
这一生多幸运赶上过你.
博主信息
排名
6
文章
6
粉丝
16
评论
8
文章类别
.net
36篇
后端
5篇
ORM
16篇
前端
48篇
随笔
13篇
移动开发
6篇
数据库
6篇
英语
3篇
rabbitmq
1篇
.net core
5篇
unity
1篇
k8s
1篇
云服务
1篇
DDD
1篇
网络
1篇
更多
mysql
1篇
python
2篇
docker
1篇
最新文章
最新评价
{{item.articleTitle}}
{{item.blogName}}
:
{{item.content}}
关于我们
ICP备案 :
渝ICP备18016597号-1
网站信息:
2018-2024
TNBLOG.NET
技术交流:
群号656732739
联系我们:
contact@tnblog.net
欢迎加群
欢迎加群交流技术