iview中使用grid栅格布局

iview中使用grid栅格布局

在后台开发中使用栅格布局在一些情况下是很舒服了的，比如利用栅格来打造table的效果，实现左侧是标题右侧是值得表格

title	value	title	value	title	value
title	val	title	val	title	value
title	val	title	val	title	value
title	val	title	val	title	value

利用栅格是非常好实现的

由于<Row></Row>一行是24格，所以满24格就会自动换行，依据这个条件可以将title设置为span="3"，将value这个这个列的宽度设置为span="5"，这样实现了栅格做表格了

设置这些表格内容可以直接在<Row>上设置,例如布局方式，左右居中，垂直居中

<Row type="flex" justify="cneter" align="middle" class-name="row">

当需要表格框的时候，我通常是这样做的

/deep/ .row{ // `/deep/`这个是穿透符，当普通的设置子组件样式不管用时，可以使用这个符号，相当于`>>>`
	border-top: solid 1px lightgray;
	border-left: solid 1px lightgray;
}
/deep/ .ivu-col{
	border-bottom: solid 1px lightgray;
	border-right: solid 1px lightgray;
} 

在表单中利用栅格来布局

<FormItem ref="formData" :modul="formData" :rules="validates">
	<Row :gutter="16"> // 如果想让两列中间有一点空间，使用gutter来设置，值为8或8的倍数
		<Col span="12">
        	<Form prop="userCount">
                <Input v-model="formData.userCount" placehole="请输入用户账户" />
            </Form>	
        </Col>
		<Col span="12">
        	<Form prop="password">
                <Input v-model="formData.password" placehole="请输入用户账户" />
            </Form>	
        </Col>
	</Row>
</FormItem>

这里既然看到了表单验证就不得不说一下这个大坑，iview在表单验证的时候使用的String，所以当你想要验证用户输入的是不是Number的时候就，很容易出错，虽然设置了type：'number'，也依然是不管用，所以在验证number类型的值得时候，这样解决。

password: [
	{require: true, message: '请输入密码'， trigger： 'blur'},
	{
         type: 'number',
		message: '输入数字格式的密码',
		trans (num) {
			return Number(num)
		}
	}
]

也可以用pattern利用正则表达式来判断

password: [
	{require: true, message: '请输入密码'， trigger： 'blur'},
	{	
         type: 'number',
		message: '输入数字格式的密码',
		pattern: /^[0-9]{8-16}$/
	}
]

当你用来验证的是选择框的时候，将触发方式trigger设置为change，有时候当设置验证为number的时候，type是管用的，可以先为尝试是否可用。

跑题了跑题了