food/src/components/SearchOrder.vue

<template>
  <el-input :placeholder="currentPlaceholder" v-model="value[1]">
    <el-select v-model="value[0]" slot="prepend" placeholder="条件选择" class="w-120px">
      <el-option label="订单号" value="orderSn" selection></el-option>
      <el-option label="收获人" value="name"></el-option>
      <el-option label="客户电话" value="tel"></el-option>
      <el-option label="客户留言" value="remark"></el-option>
      <el-option label="订单备注" value="desc"></el-option>
      <el-option label="执行飞机" value="byPlaneId"></el-option>
    </el-select>
  </el-input>
</template>

<script>
export default {
  data () {
    return {
      value: this.$store.getters['app/getOrderSerch'].search,
      placeholders: {
        orderSn: '按订单号搜索，支持模糊搜索',
        name: '按收货人名字搜索，支持模糊搜索',
        tel: '按客户电话搜索，支持模糊搜索',
        remark: '按客户留言搜索，支持模糊搜索',
        desc: '按订单备注搜索，支持模糊搜索',
        byPlaneId: '按执行订单的飞机ID搜索'
      }
    }
  },
  computed: {
    // 当前选择项的搜索描述
    currentPlaceholder () {
      return this.placeholders[this.value[0]] || '请输入搜索内容'
    }
  },
  watch: {
    value (val) {
      this.$store.commit('app/setOrderSerch', { search: val })
    }
  },
  created () {
  }
}
</script>

<style lang="scss" scoped></style>