el-col中xs的用法 El-col中的xs(Extra Small)代表超小型(Extra Small),指一般设备上的最小尺寸。常见超小型尺寸屏幕可能是iPhone 5,而更大的尺寸可能是iPad。在Vue中,使用el-col标签可以将每一行分为12个列,xs指定要对哪一列进行什么规模和尺寸的设置,其中0表示不使用任何尺寸。
即el-col-lg-12-25设置的width就是:lg="{span:'12-25'}"对应的宽度 注:lg:大屏幕 大桌面显示器 (≥1200px);md:超小屏幕 手机 (<768px);sm:小屏幕 平板 (≥768px);xs:超小屏幕 手机 (<768px) 我的需求是web端,所以用lg
采用el-col 实现,通过控制 span 来实现多列,所以理论上最多支持24列,当然这个要看屏幕宽度了。 代码语言:javascript 复制 /** * 处理一个字段占用几个td的需求 * @param { object } props 表单组件的属性 * @returns */constgetColSpan=(props)=>{// 确定一个组件占用几个格子constformColSpan=reactive({...
<el-col :xs="{span: 24, offset: 0}" :sm="{span: 12, offset: 0}" :md="{span: 8, offset: 0}" :lg="{span: 6, offset: 0}"> <!--在超小屏幕上占据整个宽度,在其他屏幕上分别占据不同宽度--> </el-col> <el-col :xs="{span: 12, offset: 0}" :sm="{span: 12, offset...