diff --git a/packages/address-list/Item.js b/packages/address-list/Item.js
new file mode 100644
index 000000000..c5b31acf8
--- /dev/null
+++ b/packages/address-list/Item.js
@@ -0,0 +1,47 @@
+import { use } from '../utils';
+import Icon from '../icon';
+import Cell from '../cell';
+import Radio from '../radio';
+
+const [sfc, bem] = use('address-item');
+
+export default sfc({
+  props: {
+    data: Object,
+    disabled: Boolean,
+    switchable: Boolean
+  },
+
+  methods: {
+    onSelect() {
+      if (this.switchable) {
+        this.$emit('select');
+      }
+    }
+  },
+
+  render(h) {
+    const { data, disabled, switchable } = this;
+    return (
+      <Cell
+        class={bem({ disabled, unswitchable: !switchable })}
+        is-link={!disabled && switchable}
+        onClick={this.onSelect}
+      >
+        <Radio name={data.id}>
+          <div class={bem('name')}>{`${data.name}，${data.tel}`}</div>
+          <div class={bem('address')}>{data.address}</div>
+        </Radio>
+        <Icon
+          slot="right-icon"
+          name="edit"
+          class={bem('edit')}
+          onClick={event => {
+            event.stopPropagation();
+            this.$emit('edit');
+          }}
+        />
+      </Cell>
+    );
+  }
+});
diff --git a/packages/address-list/Item.vue b/packages/address-list/Item.vue
deleted file mode 100644
index 7aa65a5ac..000000000
--- a/packages/address-list/Item.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<template>
-  <cell
-    :class="b({ disabled, unswitchable: !switchable })"
-    :is-link="!disabled && switchable"
-    @click="onSelect"
-  >
-    <radio :name="data.id">
-      <div :class="b('name')">{{ data.name }}，{{ data.tel }}</div>
-      <div
-        v-text="data.address"
-        :class="b('address')"
-      />
-    </radio>
-    <icon
-      slot="right-icon"
-      name="edit"
-      :class="b('edit')"
-      @click.stop="$emit('edit')"
-    />
-  </cell>
-</template>
-
-<script>
-import Radio from '../radio';
-import create from '../utils/create';
-
-export default create({
-  name: 'address-item',
-
-  components: {
-    Radio
-  },
-
-  props: {
-    data: Object,
-    disabled: Boolean,
-    switchable: Boolean
-  },
-
-  methods: {
-    onSelect() {
-      if (this.switchable) {
-        this.$emit('select');
-      }
-    }
-  }
-});
-</script>
diff --git a/packages/address-list/index.js b/packages/address-list/index.js
new file mode 100644
index 000000000..d4135ab0f
--- /dev/null
+++ b/packages/address-list/index.js
@@ -0,0 +1,63 @@
+import { use } from '../utils';
+import Button from '../button';
+import RadioGroup from '../radio-group';
+import AddressItem from './Item';
+
+const [sfc, bem, t] = use('address-list');
+
+export default sfc({
+  props: {
+    list: Array,
+    disabledList: Array,
+    disabledText: String,
+    addButtonText: String,
+    value: [String, Number],
+    switchable: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  render(h) {
+    const getList = (list, disabled) =>
+      list.map((item, index) => (
+        <AddressItem
+          data={item}
+          key={item.id}
+          disabled={disabled}
+          switchable={this.switchable && !disabled}
+          onSelect={() => {
+            this.$emit(disabled ? 'select-disabled' : 'select', item, index);
+          }}
+          onEdit={() => {
+            this.$emit(disabled ? 'edit-disabled' : 'edit', item, index);
+          }}
+        />
+      ));
+
+    const List = getList(this.list);
+    const DisabledList = getList(this.disabledList, true);
+
+    return (
+      <div class={bem()}>
+        {this.$slots.top}
+        <RadioGroup value={this.value} onInput={event => this.$emit('input', event)}>
+          {List}
+        </RadioGroup>
+        {this.disabledText && <div class={bem('disabled-text')}>{this.disabledText}</div>}
+        {DisabledList}
+        {this.$slots.default}
+        <Button
+          square
+          size="large"
+          type="danger"
+          class={bem('add')}
+          text={this.addButtonText || t('add')}
+          onClick={() => {
+            this.$emit('add');
+          }}
+        />
+      </div>
+    );
+  }
+});
diff --git a/packages/address-list/index.vue b/packages/address-list/index.vue
deleted file mode 100644
index 1880a29b5..000000000
--- a/packages/address-list/index.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-  <div :class="b()">
-    <slot name="top" />
-    <radio-group
-      :value="value"
-      @input="$emit('input', $event)"
-    >
-      <cell-group>
-        <address-item
-          v-for="(item, index) in list"
-          :data="item"
-          :key="item.id"
-          :switchable="switchable"
-          @select="$emit('select', item, index)"
-          @edit="$emit('edit', item, index)"
-        />
-      </cell-group>
-    </radio-group>
-    <div
-      v-if="disabledText"
-      v-text="disabledText"
-      :class="b('disabled-text')"
-    />
-    <cell-group v-if="disabledList.length">
-      <address-item
-        v-for="(item, index) in disabledList"
-        disabled
-        :data="item"
-        :key="item.id"
-        @select="$emit('select-disabled', item, index)"
-        @edit="$emit('edit-disabled', item, index)"
-      />
-    </cell-group>
-    <slot />
-    <van-button
-      square
-      size="large"
-      type="danger"
-      :class="b('add')"
-      :text="addButtonText || $t('add')"
-      @click="$emit('add')"
-    />
-  </div>
-</template>
-
-<script>
-import create from '../utils/create';
-import RadioGroup from '../radio-group';
-import VanButton from '../button';
-import AddressItem from './Item';
-
-export default create({
-  name: 'address-list',
-
-  components: {
-    RadioGroup,
-    VanButton,
-    AddressItem
-  },
-
-  props: {
-    list: Array,
-    disabledList: Array,
-    disabledText: String,
-    addButtonText: String,
-    value: [String, Number],
-    switchable: {
-      type: Boolean,
-      default: true
-    }
-  }
-});
-</script>
diff --git a/packages/address-list/test/__snapshots__/demo.spec.js.snap b/packages/address-list/test/__snapshots__/demo.spec.js.snap
index bbdcbc22f..7c7516b6a 100644
--- a/packages/address-list/test/__snapshots__/demo.spec.js.snap
+++ b/packages/address-list/test/__snapshots__/demo.spec.js.snap
@@ -5,39 +5,40 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-address-list">
       <div class="van-radio-group">
-        <div class="van-cell-group van-hairline--top-bottom">
-          <div class="van-cell van-cell--clickable van-address-item">
-
-            <div class="van-cell__value van-cell__value--alone">
-              <div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div> <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
-            </div>
-            <i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
-              <!---->
-              <!----></i>
-          </div>
-          <div class="van-cell van-cell--clickable van-address-item">
-
-            <div class="van-cell__value van-cell__value--alone">
-              <div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">李四，1310000000</div> <div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span></div>
-            </div>
-            <i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
-              <!---->
-              <!----></i>
-          </div>
-        </div>
-      </div>
-      <div class="van-address-list__disabled-text">以下地址超出配送范围</div>
-      <div class="van-cell-group van-hairline--top-bottom">
-        <div class="van-cell van-address-item van-address-item--disabled van-address-item--unswitchable">
+        <div class="van-cell van-cell--clickable van-address-item">
 
           <div class="van-cell__value van-cell__value--alone">
-            <div class="van-radio"><span class="van-radio__input"><input type="radio" value="3" class="van-radio__control"> <i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">王五，1320000000</div> <div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div></span></div>
+            <div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div>
+          <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
           </div>
           <i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
             <!---->
             <!----></i>
         </div>
-      </div> <button class="van-button van-button--danger van-button--large van-button--square van-address-list__add"><span class="van-button__text">新增地址</span></button>
+        <div class="van-cell van-cell--clickable van-address-item">
+
+          <div class="van-cell__value van-cell__value--alone">
+            <div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">李四，1310000000</div>
+          <div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span></div>
+          </div>
+          <i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
+            <!---->
+            <!----></i>
+        </div>
+      </div>
+      <div class="van-address-list__disabled-text">以下地址超出配送范围</div>
+      <div class="van-cell van-address-item van-address-item--disabled van-address-item--unswitchable">
+
+        <div class="van-cell__value van-cell__value--alone">
+          <div class="van-radio"><span class="van-radio__input"><input type="radio" value="3" class="van-radio__control"> <i class="van-icon van-icon-circle" style="color:undefined;font-size:undefined;"> <!----> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">王五，1320000000</div>
+          <div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div></span></div>
+        </div>
+        <i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
+          <!---->
+          <!----></i>
+      </div>
+
+      <button class="van-button van-button--danger van-button--large van-button--square van-address-list__add"><span class="van-button__text">新增地址</span></button>
     </div>
   </div>
 </div>