admin-cms/src/components/list/tabs.vue

<template>
  <div id="tabs">
    <!-- 主要成果单位 -->
    <span v-for="(item, index) in displayList" :key="index" @click="change(item.name)">{{ item.name }}</span>
    <!-- 其他 -->
    <el-dropdown trigger="click" @command="change">
      <span class="el-dropdown-link btn"><i class="el-icon-d-arrow-right"></i> </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="(item, index) in dropList" :key="index" :command="item.name">{{ item.name }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
export default {
  name: 'tabs',
  props: {
    displayList: { type: Array, default: () => [] },
    dropList: { type: Array, default: () => [] },
  },
  components: {},
  data: function () {
    return {};
  },
  created() {},
  methods: {
    change(data) {
      this.$emit('toSearch', { company: data });
    },
  },
  computed: {
    ...mapState(['user', 'menuParams']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
span {
  font-size: 16px;
  padding: 8px 10px;
  display: inline-block;
  font-weight: bold;
}
span:hover {
  cursor: pointer;
  color: #409eff;
}
.btn {
  padding: 0px 0 0 0;
  position: relative;
  top: 1px;
  i {
    font-size: 20px;
    font-weight: bold;
  }
}
</style>