Vue-iView-ui Grid 栅格

基本使用

iView-ui Grid栅格 官网

官方介绍：

我们采用了24栅格系统，将区域进行24等分，这样可以轻松应对大部分布局问题。使用栅格系统进行网页布局，可以使页面排版美观、舒适。

我们定义了两个概念，行row和列col，具体使用方法如下：

• 使用row在水平方向创建一行
• 将一组col插入在row中
• 在每个col中，键入自己的内容
• 通过设置col的span参数，指定跨越的范围，其范围是1到24
• 每个row中的col总和应该为24

如果写栅格的时候报下图错

在package.json中 配置以下代码

"rules": {
            "vue/no-parsing-error": [2, { "x-invalid-end-tag": false }]
        }

使用

<template>
  <div>
      <Row>
          <Col span="12">col-12</Col>
          <Col span="12">col-12</Col>
      </Row>
      <br>
      <Row>
          <Col span="8">col-8</Col>
          <Col span="8">col-8</Col>
          <Col span="8">col-8</Col>
      </Row>
      <br>
      <Row>
          <Col span="6">col-6</Col>
          <Col span="6">col-6</Col>
          <Col span="6">col-6</Col>
          <Col span="6">col-6</Col>
      </Row>
  </div>
</template>

使用栅格搭建表单结构

栅格系统可以用来搭建具有栅格化的页面布局，更多的是用来搭建类似栅格的form表单布局

<template>
  <div>
    <Form :model="formItem" :label-width="80">
        <Row>
            <Col span="12">
              <FormItem label="姓名">
                  <Input v-model="formItem.input" placeholder="请输入姓名"></Input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="年龄">
                  <Select v-model="formItem.select">
                      <Option value="beijing">25-30</Option>
                      <Option value="shanghai">31-35</Option>
                      <Option value="shenzhen">36-40</Option>
                  </Select>
              </FormItem>
            </Col>
            <Col span="6">
                <FormItem label="性别">
                    <Input v-model="formItem.input" placeholder="请输入性别"></Input>
                </FormItem>
            </Col>
            <Col span="6">
                <FormItem label="身高">
                    <Input v-model="formItem.input" placeholder="请输入身高"></Input>
                </FormItem>
            </Col>
            <Col span="6">
                <FormItem label="体重">
                    <Input v-model="formItem.input" placeholder="请输入体重"></Input>
                </FormItem>
            </Col>
            <Col span="6">
                <FormItem label="籍贯">
                    <Input v-model="formItem.input" placeholder="请输入籍贯"></Input>
                </FormItem>
            </Col>
        </Row>
      </Form>
  </div>
</template>
<script>
    export default {
        data () {
            return {
                formItem: {
                    input: '',
                    select: '',
                    radio: 'male',
                    checkbox: [],
                    switch: true,
                    date: '',
                    time: '',
                    slider: [20, 50],
                    textarea: ''
                }
            }
        }
    }
</script>

label-width指的是当前的表单元素中表头的宽度