✨ feat: 新增表单封面和表单描述

 <!--
 <!--
  * @Date: 2022-07-18 10:22:22
  * @Date: 2022-07-18 10:22:22
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-09-06 14:41:04
+ * @LastEditTime: 2022-09-06 15:05:23
  * @FilePath: /data-table/src/views/index.vue
  * @FilePath: /data-table/src/views/index.vue
  * @Description: 首页
  * @Description: 首页
 -->
 -->
 <template>
 <template>
-  <van-image width="100%" height="200" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
-  <div style="padding: 1rem;">表单描述</div>
-  <div style="padding: 1rem;">
+  <van-image v-if="table_cover" width="100%" height="200" :src="table_cover" />
+  <div v-if="table_title" class="table-title">{{ table_title }}</div>
+  <div class="table-box">
     <van-form @submit="onSubmit">
     <van-form @submit="onSubmit">
       <van-cell-group>
       <van-cell-group>
         <component v-for="(item, index) in mockData" :key="index" :is="item.component" :item="item" />
         <component v-for="(item, index) in mockData" :key="index" :is="item.component" :item="item" />
@@ -20,14 +20,18 @@
       </div>
       </div>
     </van-form>
     </van-form>
   </div>
   </div>
-
 </template>
 </template>
 
 
 <script setup>
 <script setup>
 import { createComponentType } from '@/hooks/useComponentType'
 import { createComponentType } from '@/hooks/useComponentType'
 
 
+const table_cover = ref('');
+const table_title = ref('');
 const mockData = ref([]);
 const mockData = ref([]);
+
 onMounted(() => {
 onMounted(() => {
+  table_cover.value = 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
+  table_title.value = '这是一个表单的描述'
   mockData.value = [{
   mockData.value = [{
     key: 'phone',
     key: 'phone',
     value: '',
     value: '',
@@ -165,4 +169,10 @@ const onSubmit = (values) => {
 </script>
 </script>
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
+  .table-title {
+    padding: 1rem;
+  }
+  .table-box {
+    padding: 1rem;
+  }
 </style>
 </style>