267ee5dbcd
【主 题】：shop_id下拉选框 给默认值 【描 述】： [原因]： 默认值 与缓存同步 让其不触发 watch [过程]： [影响]： 【结 束】 # 类型 包含: # feat：新功能（feature） # fix：修补bug # docs：文档（documentation） # style： 格式（不影响代码运行的变动） # refactor：重构（即不是新增功能，也不是修改bug的代码变动） # test：增加测试 # chore：构建过程或辅助工具的变动
73 lines
1.8 KiB
Vue
73 lines
1.8 KiB
Vue
<template>
|
|
<el-select v-model="form.shop_id" filterable :placeholder="allSel === true ? '所有商铺' : '请选择，也可输入搜索'"
|
|
@input="updateShopId">
|
|
<el-option v-if="allSel === true && shopList.length > 1" label="所有商铺" value="">
|
|
<el-avatar class="vm f-s-12" shape="square" :size="25"> all </el-avatar>
|
|
<span class="rspan">所有商铺</span>
|
|
</el-option>
|
|
<el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.shop_id">
|
|
<el-avatar v-if="item.logo != ''" class="vm" shape="square" :size="25" :src="item.logo[0]">
|
|
</el-avatar>
|
|
<el-avatar v-else :size="25" class="vm" icon="iconfont icon-tuxiang"></el-avatar>
|
|
<span class="rspan">{{ item.name }}</span>
|
|
</el-option>
|
|
</el-select>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'SelectionShopId',
|
|
props: {
|
|
value: String, // 接收父级的值作为 prop
|
|
allSel: { // 是否显示 所有商铺选项
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data () {
|
|
return {
|
|
form: {
|
|
shop_id: this.$store.state.user.shop_id
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
// 获取商铺列表
|
|
shopList () {
|
|
return this.$store.state.shopList
|
|
}
|
|
},
|
|
watch: {
|
|
shopList (val) {
|
|
this.form.shop_id = this.$store.state.user.shop_id
|
|
this.updateShopId()
|
|
}
|
|
},
|
|
created () {
|
|
if (this.shopList.length > 0) {
|
|
this.form.shop_id = this.$store.state.user.shop_id
|
|
this.updateShopId()
|
|
}
|
|
},
|
|
methods: {
|
|
updateShopId () {
|
|
this.$emit('input', this.form.shop_id) // 发送 input 事件给父级
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.centered-avatar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.rspan {
|
|
float: right;
|
|
color: #8492a6;
|
|
font-size: 13px
|
|
}
|
|
</style>
|