技術標籤：VUEvue

基本使用

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指的是當前的表單元素中表頭的寬度