【sgExportBtn】自定义组件：导出按钮（支持上下文关联导出菜单，配置导出按钮命令、样式、图标路径等）

sgExportBtn.vue

<template>
  <div :class="$options.name">
    <el-dropdown
      :show-timeout="0"
      :split-button="true"
      :placement="placement_dropdown"
      :disabled="disabled"
      @command="command"
    >
      <el-tooltip
        popper-class="sg-el-tooltip"
        :enterable="false"
        effect="dark"
        :content="tooltipContent || `导出当前筛选结果数据Excel`"
        :placement="placement_tooltip"
        :transition="`none`"
      >
        <span
          @click="command(dropdownItems[0].command)"
          style="padding: 10px 20px; margin-left: -20px; margin-right: -20px"
          >{{ dropdownItems[0].label }}</span
        >
      </el-tooltip>
      <el-dropdown-menu slot="dropdown" class="export-dropdown-menu">
        <el-dropdown-item
          :command="item.command"
          v-for="(item, index) in dropdownItems.slice(1)"
          :key="index"
          :divided="item.divided"
          v-if="getBtnShow({ item, index })"
        >
          <el-tooltip
            :content="`${item.tip}`"
            :effect="`dark`"
            :enterable="false"
            :placement="`top`"
            :popper-class="`${$options.name}-el-tooltip`"
            :transition="`none`"
            :disabled="!item.tip"
            ><div class="export-item-btn">
              <i :class="item.icon" v-if="item.icon"></i>{{ item.label
              }}<img v-if="item.src" :src="item.src" alt="" />
            </div>
          </el-tooltip>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
export default {
  name: "sgExportBtn",
  components: {},
  data() {
    return {
      form: {},
      disabled: false,
      placement_dropdown: `bottom-end`,
      placement_tooltip: `top-end`,
      tooltipContent: null,
      dropdownItems: [
        // 第一个是默认按钮点击触发
        {
          label: `导出`,
          command: `xls`,
          icon: `el-icon-download`,
        },
        // 后面以此是下拉框里面的按钮
        {
          label: `导出Excel`,
          command: `xls`,
          icon: `el-icon-download`,
          src: `~@/../static/img/fileType/xls.svg`,
        },
        {
          label: `导出CSV`,
          command: `csv`,
          icon: `el-icon-download`,
          src: `~@/../static/img/fileType/document/csv.svg`,
        },
      ],
    };
  },
  props: ["data"],
  computed: {},
  watch: {
    data: {
      handler(newValue, oldValue) {
        //console.log('深度监听：', newValue, oldValue);
        if (newValue && Object.keys(newValue).length) {
          this.form = newValue;
          this.$g.convertForm2ComponentParam(`disabled`, this);
          this.$g.convertForm2ComponentParam(`placement_dropdown`, this);
          this.$g.convertForm2ComponentParam(`placement_tooltip`, this);
          this.$g.convertForm2ComponentParam(`tooltipContent`, this);
          this.$g.convertForm2ComponentParam(`dropdownItems`, this);
        }
      },
      deep: true, //深度监听
      immediate: true, //立即执行
    },
  },
  created() {},
  mounted() {},
  methods: {
    getShow({ item, index, _this = this } = {}) {
      return typeof item.show === "function"
        ? item.show({ item, index, _this })
        : item.show;
    },
    getHide({ item, index, _this = this } = {}) {
      return typeof item.hide === "function"
        ? item.hide({ item, index, _this })
        : item.hide;
    },
    getBtnShow({ item, index, _this = this } = {}) {
      if (item.hasOwnProperty("show")) return this.getShow({ item, index, _this });
      if (item.hasOwnProperty("hide")) return !this.getHide({ item, index, _this });
      return true;
    },

    exportData(d) {
      this.$emit(`exportData`, d);
    },
    command(d) {
      let item = this.dropdownItems.find((v) => v.command == d);
      let data = { ...item, fileType: item.command };
      item.clickEvent ? item.clickEvent(data) : this.exportData(data);
    },
  },
  beforeDestroy() {},
};
</script>
<style lang="scss" scoped>
.sgExportBtn {
  display: inline-block;
}
.export-dropdown-menu {
  .export-item-btn {
    img {
      width: 16px;
      height: 16px;
      object-position: center;
      object-fit: contain;
      transform: translateY(2px);
      margin-left: 2px;
    }
  }
}
</style>

demo

<sgExportBtn
  :data="{
    dropdownItems: [
      // 第一个是默认按钮点击触发
      {
        label: `导出比较结果`,
        command: `xls`,
        icon: `el-icon-download`,
      },
      // 后面以此是下拉框里面的按钮
      {
        label: `导出比较结果Excel`,
        command: `xls`,
        icon: `el-icon-download`,
        src: `~@/../static/img/fileType/xls.svg`,
      },
      {
        label: `导出比较结果Word`,
        command: `doc`,
        icon: `el-icon-download`,
        src: `~@/../static/img/fileType/document/doc.svg`,
      },
      {
        label: `导出比较结果PDF`,
        command: `pdf`,
        icon: `el-icon-download`,
        src: `~@/../static/img/fileType/document/pdf.svg`,
      },
    ],
  }"
  @exportData="exporData"
/>

<sgExportBtn
          class="loading-btn"
          v-loading="loading_export"
          :element-loading-text="`生成中...`"
          :data="{
            disabled: total == 0,
            dropdownItems: [
              {
                label: `导出`,
                command: `xls`,
                icon: `el-icon-download`,
              },
              {
                label: `导出成果列表Excel`,
                command: `xls`,
                icon: `el-icon-download`,
                src: `~@/../static/img/fileType/xls.svg`,
              },
              {
                label: `导出成果列表CSV`,
                command: `csv`,
                icon: `el-icon-download`,
                src: `~@/../static/img/fileType/document/csv.svg`,
              },
              {
                label: `导出当前成果列表附件`,
                command: `export_CGFJ_list`,
                icon: `el-icon-download`,
                src: `~@/../static/img/fileType/other/zip.svg`,
              },
              {
                label: `导出已勾选成果的附件`,
                command: `export_CGFJ_check`,
                icon: `el-icon-download`,
                src: `~@/../static/img/fileType/other/zip.svg`,
              },
            ],
          }"
          @exportData="exportData"
          style="margin-left: 10px"
        />

...



    exportData(d) {
      console.log(``, d);
    },