写一个页面，实现移动端响应式树形功能，前面带vantUI的复选框，后面带箭头，点击可以展开

以下是一个简单的实现方式：

1. 首先，引入Vant UI组件库和相关的CSS样式文件。

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/vant/2.8.6/index.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vant/2.8.6/vant.min.js"></script>

2. 在HTML中添加一个Vant的TreeSelect组件，并设置响应式的样式。

<template>
  <van-tree-select
    v-model="value"
    :items="items"
    :height="height"
    :active-color="activeColor"
    :checkable="checkable"
    :max-height="maxHeight"
    :item-height="itemHeight"
    :expand-all="expandAll"
    :border="false"
    @change="onChange">
    <template v-slot:label="{ item }">
      <van-checkbox v-model="item.checked">{{ item.label }}</van-checkbox>
    </template>
  </van-tree-select>
</template>

<script>
export default {
  data() {
    return {
      value: [],
      items: [], // 树形结构数据，具体格式见下面
      activeColor: '#1989fa',
      checkable: true,
      expandAll: false,
      height: 500,
      itemHeight: 44,
      maxHeight: 500,
    };
  },
  methods: {
    onChange(e) {
      console.log('onChange:', e);
    },
  },
};
</script>

<style scoped>
.van-tree-select__item__text {
  display: flex;
  align-items: center;
}

.van-tree-select__item__label {
  flex: 1;
}

.van-tree-select__item__right-icon {
  font-size: 16px;
  margin-left: 10px;
}
</style>

3. 在Vue组件中动态生成树形结构数据，并传递给TreeSelect组件。

<script>
export default {
  data() {
    return {
      value: [],
      items: [], // 树形结构数据，具体格式见下面
      activeColor: '#1989fa',
      checkable: true,
      expandAll: false,
      height: 500,
      itemHeight: 44,
      maxHeight: 500,
    };
  },
  created() {
    // 动态生成树形结构数据
    this.items = [
      {
        label: '一级节点1',
        value: '1',
        children: [
          {
            label: '二级节点1-1',
            value: '1-1',
            children: [
              {
                label: '三级节点1-1-1',
                value: '1-1-1',
              },
              {
                label: '三级节点1-1-2',
                value: '1-1-2',
              },
            ],
          },
          {
            label: '二级节点1-2',
            value: '1-2',
            children: [
              {
                label: '三级节点1-2-1',
                value: '1-2-1',
              },
              {
                label: '三级节点1-2-2',
                value: '1-2-2',
              },
            ],
          },
        ],
      },
      {
        label: '一级节点2',
        value: '2',
        children: [
          {
            label: '二级节点2-1',
            value: '2-1',
          },
          {
            label: '二级节点2-2',
            value: '2-2',
          },
        ],
      },
    ];
  },
  methods: {
    onChange(e) {
      console.log('onChange:', e);
    },
  },
};
</script>

4. 在tree-select__item__text元素中添加图标和文字，使用伸缩盒子布局使其居中对齐。

.van-tree-select__item__text {
  display: flex;
  align-items: center;
}

.van-tree-select__item__label {
  flex: 1;
}

.van-tree-select__item__right-icon {
  font-size: 16px;
  margin-left: 10px;
}

至此，一个移动端响应式树形功能的页面就实现了。