frame/components/search-bar.vue

<template>
  <el-card>
    <el-form :model="selects" size="mini" :inline="true">
      <el-form-item label="培训批次" v-if="display('planBatch')">
        <el-select v-model="selects.planBatch" placeholder="">
          <!-- <el-option :label="" :value=""></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="年度计划" v-if="display('plan')">
        <el-select v-model="selects.plan" placeholder="">
          <!-- <el-option :label="" :value=""></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="期" v-if="display('term')">
        <el-select v-model="selects.term" placeholder="">
          <!-- <el-option :label="" :value=""></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="批次" v-if="display('batch')">
        <el-select v-model="selects.batch" placeholder="">
          <!-- <el-option :label="" :value=""></el-option> -->
        </el-select>
      </el-form-item>
      <el-form-item label="班级" v-if="display('classes')">
        <el-select v-model="selects.classes" placeholder="">
          <!-- <el-option :label="" :value=""></el-option> -->
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import _ from 'lodash';
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'search-bar',
  props: {
    allow: { type: Array, default: () => [] }, //type:'planBatch', 'plan', 'term', 'batch', 'classes'
  },
  components: {},
  data: function() {
    return {
      selects: {},
      allowed: [],
    };
  },
  created() {},
  methods: {
    display(type) {
      return _.find(this.allow, f => f == type);
    },
  },
  // watch: {
  //   planBatch,
  // },
  computed: {
    ...mapState(['user', 'planBatch', 'plan', 'term', 'batch', 'classes']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

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