Skip to content

P
pet-business-web
Commit 45c4185e authored by 小费同学阿's avatar 小费同学阿 💬
Browse files
Options

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

parent 625b114f
Hide whitespace changes
Inline Side-by-side
Showing with 70 additions and 68 deletions
src/views/service-management/registration-queue/components/choose-pet.vue
View file @ 45c4185e
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
:visible.sync="isShow" :visible.sync="isShow"
:before-close="closeModle" :before-close="closeModle"
width="75rem" width="75rem"
:height="initial"
> >
<el-form ref="queryForm" :inline="true" :model="queryParams" :rules="rules" label-width="6.25rem" size="small"> <el-form ref="queryForm" :inline="true" :model="queryParams" :rules="rules" label-width="6.25rem" size="small">
<div class="basicInformation"> <div class="basicInformation">
...@@ -48,75 +47,76 @@ ...@@ -48,75 +47,76 @@
</el-form-item> </el-form-item>
</el-form> </el-form>
<!-- 列表区--> <!-- 列表区-->
<el-table <div :style="{ maxHeight: maxHeight, overflow: 'auto' }">
ref="table" <el-table
v-loading="loading" ref="table"
height="27.5rem" v-loading="loading"
style="cursor: pointer;" style="cursor: pointer;"
row-key="petBo.petsId" row-key="petBo.petsId"
:data="petsList" :data="petsList"
:header-cell-style="{background:'#F4F4F4'}" :header-cell-style="{background:'#F4F4F4'}"
:header-cell-class-name="cellClass" :header-cell-class-name="cellClass"
@selection-change="handleSelectionChange" @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
> >
<template slot-scope="scope"> <el-table-column :selectable="selectable" align="left" min-width="30" reserve-selection type="selection" />
{{ scope.row.petBreed }}/{{ scope.row.petChildBreed }} <el-table-column label="序号" min-width="80" align="left" show-overflow-tooltip type="index" />
</template> <el-table-column label="宠主姓名" min-width="80" align="left" prop="ownerName" show-overflow-tooltip>
</el-table-column> <template slot-scope="scope">
<el-table-column align="left" label="宠物性别" min-width="60" prop="petSex" show-overflow-tooltip> <span>{{ scope.row.ownerName || '-' }}</span>
<template slot-scope="scope"> </template>
<dict-tag :options="dict.type.pet_sex" :value="scope.row.petSex" /> </el-table-column>
</template> <el-table-column align="left" label="手机号" min-width="80" prop="phone" show-overflow-tooltip>
</el-table-column> <template slot-scope="scope">
<el-table-column align="left" label="生存状态" min-width="60" prop="petBo.existState" show-overflow-tooltip> <span>{{ scope.row.phone || '-' }}</span>
<template slot-scope="scope"> </template>
<span v-if="scope.row.petBo.existState === '0'" style="color: #5FB54B">• 生存</span> </el-table-column>
<span v-if="scope.row.petBo.existState === '1'" style="color: #FF9D4E">• 死亡</span> <el-table-column align="left" label="会员等级" min-width="80" prop="membershipLevel" show-overflow-tooltip>
<span v-if="scope.row.petBo.existState !== '0'&&scope.row.petBo.existState !== '1'">-</span> <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" />--> <!-- <dict-tag :options="dict.type.exist_state" :value="scope.row.petBo.existState" />-->
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div>
<!--分页--> <!--分页-->
<pagination <pagination
v-show="total>6" v-show="total>6"
...@@ -149,6 +149,8 @@ export default { ...@@ -149,6 +149,8 @@ export default {
}, },
data() { data() {
return { return {
minHeight: '21rem', // 设置最小高度
maxHeight: '21rem', // 设置最小高度
// 会员等级下拉框 // 会员等级下拉框
membershipLeveMap: { membershipLeveMap: {
'1': '一级会员', '1': '一级会员',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment