---
nav: default
---
### Group
<img width="100" src="http://qr.topscan.com/api.php?text=demo%2F%23%2Fcomponent%2Fgroup"/>
<a href="demo/#/component/group" target="_blank" style="font-size:12px;color:#888;">demo 原始链接：demo/#/component/group</a>


---
#### 演示
<div style="width:377px;height:667px;display:inline-block;border:1px dashed #ececec;border-radius:5px;overflow:hidden;">
<iframe src="demo/#/component/group" width="375" height="667" border="0" frameborder="0"></iframe>
</div>
#### demo 代码

``` html
<template>
  <div>
    <group
      label-width="4.5em"
      label-margin-right="2em"
      label-align="right"
    >
      <cell
        title="Cell"
        value="value"
        is-link
      />
      <cell
        title="Cell"
        value="value"
        is-link
        value-align="left"
      />
      <x-input
        v-model="value1"
        title="上报人"
      />
      <x-input placeholder="I'm placeholder">
        <img
          slot="restricted-label"
          style="display:inline-block;vertical-align:middle;"
          src="http://dn-placeholder.qbox.me/110x110/FF2D55/000"
          width="24"
          height="24"
        >
      </x-input>
      <x-input
        v-model="value1"
        title="上<i class='vux-blank-half'></i>报<i class='vux-blank-half'></i>人"
      />
      <x-number
        v-model="numberValue"
        title="Quantity"
        align="left"
        button-style="round"
        :min="0"
        :max="5"
      />
      <datetime
        v-model="time1"
        title="时&emsp;&emsp;&nbsp;间"
        value-text-align="left"
      />
      <selector
        v-model="value2"
        title="隐患类别"
        :options="['工艺技术', '其他']"
      />
      <selector
        v-model="value7"
        title="隐患类别"
        placeholder="Placeholder"
        :options="['工艺技术', '其他']"
      />
      <selector
        v-model="value8"
        title="隐患类别"
        :options="['工艺技术', '其他']"
      />
      <x-input
        v-model="value3"
        title="隐患部位"
        placeholder="必填"
      />
      <x-input
        v-model="value4"
        title="密码"
        type="password"
        placeholder="必填"
      />
      <popup-picker
        v-model="value5"
        title="请选择"
        :data="list"
        value-text-align="left"
      />
      <popup-picker
        v-model="value6"
        title="请选择"
        placeholder="Required"
        :data="list"
        value-text-align="left"
      />
      <x-address
        v-model="addressValue"
        title="地址选择"
        raw-value
        :list="addressData"
        value-text-align="left"
      />
      <x-textarea
        title="详细信息"
        placeholder="请填写详细信息"
        :show-counter="false"
        :rows="3"
      />
      <x-textarea
        placeholder="请填写详细信息"
        :show-counter="false"
        :rows="3"
      >
        <img
          slot="restricted-label"
          style="display:inline-block;vertical-align:middle;"
          src="http://dn-placeholder.qbox.me/110x110/FF2D55/000"
          width="24"
          height="24"
        >
      </x-textarea>
    </group>
    <br>
    <group>
      <group-title slot="title">
        I'm a title<span style="float:right;">right</span>
      </group-title>
      <cell title="cell" />
    </group>
    <br>
    <group
      title="justify"
      label-width="5.5em"
      label-margin-right="2em"
      label-align="justify"
    >
      <cell
        title="哈哈"
        value="value"
        is-link
      />
      <cell
        title="哈哈哈哈哈"
        value="value"
        is-link
        value-align="left"
      />
      <x-input
        v-model="value1"
        title="上报人"
      />
      <x-number
        v-model="numberValue"
        title="Quantity"
        align="left"
        button-style="round"
        :min="0"
        :max="5"
      />
      <datetime
        v-model="time1"
        title="时间"
        value-text-align="left"
      />
      <selector
        v-model="value2"
        title="隐患类别"
        :options="['工艺技术', '其他']"
      />
      <popup-picker
        v-model="value5"
        title="请选择"
        :data="list"
        value-text-align="left"
      />
      <x-address
        v-model="addressValue"
        title="地址选择"
        raw-value
        :list="addressData"
        value-text-align="left"
        label-align="justify"
      />
      <x-switch title="选择" />
      <x-textarea
        title="详细信息"
        placeholder="请填写详细信息"
        :show-counter="false"
        :rows="3"
      />
    </group>
    <br>
  </div>
</template>

<script>
import { GroupTitle, Group, Cell, XInput, Selector, PopupPicker, Datetime, XNumber, XAddress, XTextarea, XSwitch } from '../components/_index'
import { cvux as ChinaAddressData } from 'city-data/lib/mobile'

export default {
  components: {
    Group,
    GroupTitle,
    Cell,
    XInput,
    Selector,
    PopupPicker,
    XAddress,
    Datetime,
    XNumber,
    XTextarea,
    XSwitch
  },
  data () {
    return {
      addressData: ChinaAddressData,
      addressValue: ['广东省', '深圳市', '南山区'],
      value1: '张三',
      value2: '工艺技术',
      value3: '',
      value7: '',
      value8: '',
      value4: '',
      time1: '2017-06-01',
      value5: ['A'],
      value6: [],
      list: [['A', 'B', 'C']],
      numberValue: 0
    }
  }
}
</script>

```

#### Github Issue