feats

src/views/register/components/InlineItem.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="inline-item">
+    <div v-if="label">{{label}}</div>
+    <div><slot></slot></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InlineItem',
+  props: {
+    label: String,
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.inline-item {
+  display: inline-block;
+  margin-bottom: 1em;
+  margin-right: 1.6em;
+
+  & > div {
+    &:last-child {
+      margin-left: .6em;
+    }
+
+    display: inline-block;
+  }
+}
+</style>

src/views/register/list.vue

@@ -1,49 +1,60 @@
 <template>
   <div class="body">
     <el-card class="box-card" shadow="never">
-      姓名：
-      <el-input v-model="name" style="width: 200px; margin-right: 20px" />
-      手机号：<el-input v-model="phone" style="width: 200px; margin-right: 20px" />
-      身份：
-      <el-select v-model="personType" style="margin-right:8px" filterable placeholder="请选择">
-        <el-option
-          v-for="item in typeOptions"
-          :key="item.value"
-          :label="item.value"
-          :value="item.label"
+      <inline-item label="姓名">
+        <el-input v-model="name" style="width: 200px" />
+      </inline-item>
+
+      <inline-item label="手机号">
+        <el-input v-model="phone" style="width: 200px" />
+      </inline-item>
+      <inline-item label="身份">
+        <el-select v-model="personType" style="margin-right:8px" filterable placeholder="请选择">
+          <el-option
+            v-for="item in typeOptions"
+            :key="item.value"
+            :label="item.value"
+            :value="item.label"
+          />
+        </el-select>
+      </inline-item>
+      <inline-item label="报名地区">
+        <el-cascader
+          v-model="area2"
+          :options="options"
+          :props="{ checkStrictly: true }"
+          @expand-change="changeExpand"
+          @change="handleChange"
+        />
+      </inline-item>
+      <inline-item label="签到时间">
+        <el-date-picker
+          v-model="daterange"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          value-format="yyyy-MM-dd"
+          style="margin-right: 20px"
+          @change="dateChange"
         />
-      </el-select>
-      报名地区：
-      <el-cascader
-        v-model="area2"
-        :options="options"
-        :props="{ checkStrictly: true }"
-        @expand-change="changeExpand"
-        @change="handleChange"
-      />
-      签到时间：<el-date-picker
-        v-model="daterange"
-        type="daterange"
-        range-separator="至"
-        start-placeholder="开始日期"
-        end-placeholder="结束日期"
-        value-format="yyyy-MM-dd"
-        style="margin-right: 20px"
-        @change="dateChange"
-      />
-      <div style="float:right">
-        <el-button type="primary" @click="onSearch">查询</el-button>
-        <el-button @click="onReset">重置</el-button>
-        <el-button @click="excelOut">导出</el-button>
-      </div>
+      </inline-item>
+
+      <inline-item>
+        <div>
+          <el-button type="primary" @click="onSearch">查询</el-button>
+          <el-button @click="onReset">重置</el-button>
+          <el-button @click="excelOut">导出</el-button>
+        </div>
+      </inline-item>
     </el-card>
     <el-table stripe :data="tableData" border style="width: 100%">
-      <el-table-column prop="name" label="姓名" />
-      <el-table-column prop="phone" width="110" label="手机号" />
+      <el-table-column prop="name" label="姓名" width="200" />
+      <el-table-column prop="phone" width="200" label="手机号" />
       <el-table-column prop="personType" width="110" label="身份" />
       <el-table-column prop="areaName" label="所在地" />
       <el-table-column prop="interestTo" label="意向产品" />
-      <el-table-column prop="createDate" label="报名时间">
+      <el-table-column prop="createDate" label="报名时间" width="200">
         <template slot-scope="scope">{{ formate(scope.row.createDate) }}</template>
       </el-table-column>
     </el-table>
@@ -66,6 +77,9 @@ import { getCityList } from '@/api/city'
 
 import dayjs from 'dayjs'
 export default {
+  components: {
+    InlineItem: () => import('./components/InlineItem.vue')
+  },
   data() {
     return {
       typeOptions: [