food/src/components/SelectionShopId.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>