场景:前端开发中,经常会遇到比较多的表单填写页面,其中有el-form,el-table,表格的每一列中又嵌套着输入框或者下拉框,然后每个还需要做单独的校验效果: 点击保存可校验el-input和el-select是否有值，不符合校验规则就标红提醒 1.el-form嵌套el-table1.el-form里面嵌套el-table2.在el-table-column自定义内容里面，嵌套el-form-item，里面再放el-input或者el-select结构3.数据的结构因为el-form是最外层的，所以formData是个对象，对象里放el-table用到的数组和rules这样定义是为了校验
场景:前端开发中,经常会遇到比较多的表单填写页面,其中有el-form,el-table,表格的每一列中又嵌套着输入框或者下拉框,然后每个还需要做单独的校验效果: 点击保存可校验el-input和el-select是否有值，不符合校验规则就标红提醒 1.el-form嵌套el-table1.el-form里面嵌套el-table2.在el-table-column自定义内容里面，嵌套el-form-item，里面再放el-input或者el-select结构3.数据的结构因为el-form是最外层的，所以formData是个对象，对象里放el-table用到的数组和rules这样定义是为了校验
可以简单理解为：label是给用户展示的东西，value是前端往后端传递的真实值template>div>el-page-header@back="goBack"content="注册">el-page-header>el-divider>el-divider>el-row>el-col:span="12":offset="6">el-formref="form":model="userInfo"label-width="80px">el-form-itemlabel="用户名">el-inputv-model="userInfo.username">el-input>el-form-item
可以简单理解为：label是给用户展示的东西，value是前端往后端传递的真实值template>div>el-page-header@back="goBack"content="注册">el-page-header>el-divider>el-divider>el-row>el-col:span="12":offset="6">el-formref="form":model="userInfo"label-width="80px">el-form-itemlabel="用户名">el-inputv-model="userInfo.username">el-input>el-form-item
前期回顾 Vue项目实战——哔哩哔哩移动端开发_0.活在风浪里的博客-CSDN博客撑着下班前半小时我用vue写《哔哩哔哩项目》移动端、新手还在哭、老鸟一直在笑。。。技术选型Vue2，技术栈有axios、Vh等，下班过来敲哈哈https://blog.csdn.net/m0_57904695/article/details/123594836公司各种需求又来了，直接看下面文吧，一看就懂就不在说需求了 ，此时我觉得我的表情包是【我就像是一个小朋友站在路标下满头的问号】 目录第一种选中复选框表格变色 效果图：第二种点击行表格变色+鼠标经过无hover效果 效果图：第三种 鼠标经过
前期回顾 Vue项目实战——哔哩哔哩移动端开发_0.活在风浪里的博客-CSDN博客撑着下班前半小时我用vue写《哔哩哔哩项目》移动端、新手还在哭、老鸟一直在笑。。。技术选型Vue2，技术栈有axios、Vh等，下班过来敲哈哈https://blog.csdn.net/m0_57904695/article/details/123594836公司各种需求又来了，直接看下面文吧，一看就懂就不在说需求了 ，此时我觉得我的表情包是【我就像是一个小朋友站在路标下满头的问号】 目录第一种选中复选框表格变色 效果图：第二种点击行表格变色+鼠标经过无hover效果 效果图：第三种 鼠标经过
📝个人简介⭐个人主页：我是段段🙋🍊博客领域：编程基础、前端💻🍅写作风格：干货！干货！都是干货！🍑精选专栏：Vue🛸支持段段：点赞👍、收藏⭐、留言💬文章目录前言1、合并行2、合并行列前言在写项目的时候有时候会经常遇到把行和列合并起来的情况，因为有些数据是重复渲染的，不合并行列会使表格看起来非常的混乱，如下：而我们想要的数据是下面这种情况，将重复的行进行合并，使表格看起来简单明了，如下：1、合并行所谓的合并行就是将多行相同的数据变成一行来显示，直接上代码，页面的布局比较简单template>divclass="table">el-table:data="tableData":span-metho
📝个人简介⭐个人主页：我是段段🙋🍊博客领域：编程基础、前端💻🍅写作风格：干货！干货！都是干货！🍑精选专栏：Vue🛸支持段段：点赞👍、收藏⭐、留言💬文章目录前言1、合并行2、合并行列前言在写项目的时候有时候会经常遇到把行和列合并起来的情况，因为有些数据是重复渲染的，不合并行列会使表格看起来非常的混乱，如下：而我们想要的数据是下面这种情况，将重复的行进行合并，使表格看起来简单明了，如下：1、合并行所谓的合并行就是将多行相同的数据变成一行来显示，直接上代码，页面的布局比较简单template>divclass="table">el-table:data="tableData":span-metho
文章目录前言一、el-colspanpush&pull响应式offset二、el-rowgutterjustifyalign总结前言拖拉了一晚,总结了一些Layout布局工具的使用方法.一、el-col本来打算先说row的…写完看了一遍感觉还是换过来的好(捂脸).el-col是el-row的子元素.在el-row添加style="flex-direction:column;"可以实现纵向排列el-col,在需要纵向布局时可以使用,横向col现在填满默认自动换行,不需要特别规定;span规定一个col占据24份中的多少份.倒也不是必加的属性…当el-row中仅有一个el-col时,该el-col
文章目录前言一、el-colspanpush&pull响应式offset二、el-rowgutterjustifyalign总结前言拖拉了一晚,总结了一些Layout布局工具的使用方法.一、el-col本来打算先说row的…写完看了一遍感觉还是换过来的好(捂脸).el-col是el-row的子元素.在el-row添加style="flex-direction:column;"可以实现纵向排列el-col,在需要纵向布局时可以使用,横向col现在填满默认自动换行,不需要特别规定;span规定一个col占据24份中的多少份.倒也不是必加的属性…当el-row中仅有一个el-col时,该el-col
