66896 【UI】列表样式、按钮icon、间距、边距、对齐、进度样式问题

src/views/service-management/registration-queue/components/choose-pet.vue

@@ -6,7 +6,6 @@
     :visible.sync="isShow"
     :before-close="closeModle"
     width="75rem"
-    :height="initial"
   >
     <el-form ref="queryForm" :inline="true" :model="queryParams" :rules="rules" label-width="6.25rem" size="small">
       <div class="basicInformation">
@@ -48,75 +47,76 @@
       </el-form-item>
     </el-form>
     <!-- 列表区-->
-    <el-table
-      ref="table"
-      v-loading="loading"
-      height="27.5rem"
-      style="cursor: pointer;"
-      row-key="petBo.petsId"
-      :data="petsList"
-      :header-cell-style="{background:'#F4F4F4'}"
-      :header-cell-class-name="cellClass"
-      @selection-change="handleSelectionChange"
-    >
-      <el-table-column :selectable="selectable" align="left" min-width="30" reserve-selection type="selection" />
-      <el-table-column label="序号" min-width="80" align="left" show-overflow-tooltip type="index" />
-      <el-table-column label="宠主姓名" min-width="80" align="left" prop="ownerName" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span>{{ scope.row.ownerName || '-' }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column align="left" label="手机号" min-width="80" prop="phone" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span>{{ scope.row.phone || '-' }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column align="left" label="会员等级" min-width="80" prop="membershipLevel" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span>{{ membershipLeveMap[scope.row.membershipLevel] || '-' }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column align="left" label="会员卡余额" min-width="80" prop="balance" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span>{{ moneyFormat(scope.row.balance) || '0.00' }}元</span>
-        </template>
-      </el-table-column>
-      <el-table-column align="left" label="宠物昵称" min-width="80" prop="petNickname" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span>{{ scope.row.petNickname || '-' }}</span>
-        </template>
-      </el-table-column>
-      <!--      <el-table-column-->
-      <!--        align="center"-->
-      <!--        label="宠物品种"-->
-      <!--        min-width="80"-->
-      <!--        prop="petBreed"-->
-      <!--        show-overflow-tooltip-->
-      <!--     />-->
-      <el-table-column
-        label="宠物品种"
-        prop="petBreed"
-        align="left"
-        show-overflow-tooltip
+    <div :style="{ maxHeight: maxHeight, overflow: 'auto' }">
+      <el-table
+        ref="table"
+        v-loading="loading"
+        style="cursor: pointer;"
+        row-key="petBo.petsId"
+        :data="petsList"
+        :header-cell-style="{background:'#F4F4F4'}"
+        :header-cell-class-name="cellClass"
+        @selection-change="handleSelectionChange"
       >
-        <template slot-scope="scope">
-          {{ scope.row.petBreed }}/{{ scope.row.petChildBreed }}
-        </template>
-      </el-table-column>
-      <el-table-column align="left" label="宠物性别" min-width="60" prop="petSex" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.pet_sex" :value="scope.row.petSex" />
-        </template>
-      </el-table-column>
-      <el-table-column align="left" label="生存状态" min-width="60" prop="petBo.existState" show-overflow-tooltip>
-        <template slot-scope="scope">
-          <span v-if="scope.row.petBo.existState === '0'" style="color: #5FB54B">• 生存</span>
-          <span v-if="scope.row.petBo.existState === '1'" style="color: #FF9D4E">• 死亡</span>
-          <span v-if="scope.row.petBo.existState !== '0'&&scope.row.petBo.existState !== '1'">-</span>
+        <el-table-column :selectable="selectable" align="left" min-width="30" reserve-selection type="selection" />
+        <el-table-column label="序号" min-width="80" align="left" show-overflow-tooltip type="index" />
+        <el-table-column label="宠主姓名" min-width="80" align="left" prop="ownerName" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.ownerName || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="手机号" min-width="80" prop="phone" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.phone || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="会员等级" min-width="80" prop="membershipLevel" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ membershipLeveMap[scope.row.membershipLevel] || '-' }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="会员卡余额" min-width="80" prop="balance" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ moneyFormat(scope.row.balance) || '0.00' }}元</span>
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="宠物昵称" min-width="80" prop="petNickname" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span>{{ scope.row.petNickname || '-' }}</span>
+          </template>
+        </el-table-column>
+        <!--      <el-table-column-->
+        <!--        align="center"-->
+        <!--        label="宠物品种"-->
+        <!--        min-width="80"-->
+        <!--        prop="petBreed"-->
+        <!--        show-overflow-tooltip-->
+        <!--     />-->
+        <el-table-column
+          label="宠物品种"
+          prop="petBreed"
+          align="left"
+          show-overflow-tooltip
+        >
+          <template slot-scope="scope">
+            {{ scope.row.petBreed }}/{{ scope.row.petChildBreed }}
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="宠物性别" min-width="60" prop="petSex" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <dict-tag :options="dict.type.pet_sex" :value="scope.row.petSex" />
+          </template>
+        </el-table-column>
+        <el-table-column align="left" label="生存状态" min-width="60" prop="petBo.existState" show-overflow-tooltip>
+          <template slot-scope="scope">
+            <span v-if="scope.row.petBo.existState === '0'" style="color: #5FB54B">• 生存</span>
+            <span v-if="scope.row.petBo.existState === '1'" style="color: #FF9D4E">• 死亡</span>
+            <span v-if="scope.row.petBo.existState !== '0'&&scope.row.petBo.existState !== '1'">-</span>
           <!--          <dict-tag :options="dict.type.exist_state" :value="scope.row.petBo.existState" />-->
-        </template>
-      </el-table-column>
-    </el-table>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
     <!--分页-->
     <pagination
       v-show="total>6"
@@ -149,6 +149,8 @@ export default {
   },
   data() {
     return {
+      minHeight: '21rem', // 设置最小高度
+      maxHeight: '21rem', // 设置最小高度
       // 会员等级下拉框
       membershipLeveMap: {
         '1': '一级会员',