查询按钮组件

 <!-- 查询按钮组件-->
<template>
  <el-form>
    <el-form-item v-for="button in buttonArr"
                  :key="button.index"
                  :index="button.index">
      <slot name="tuns-specific-button"
            :button="button"
            v-if="button.showType == 'specific'"></slot>
      <el-button :type="button.type"
                 @click="handleClick(button)"
                 :size="button.size"
                 :disabled="disableBool[button.btnType]"
                 :loading="loadingBool[button.btnType]"
                 v-else>{{ button.text }}</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
/**
 * 批量按钮组件
 * @param {object} disableBool 按钮禁用对象 {insert:true,update:false}
 * @param {object} loadingBool 按钮加载对象 {insert:true,update:false}
 * @param {object} showBool 按钮显示对象 {insert:true,update:false}
 * @param {array} btnConfig 配置参数数组
 * 数组中包含
 *   @param {string} type 按钮类型	primary / success / warning / danger / info / text
 *   @param {string} size	尺寸		medium / small / mini
 *   @param {string} btnType 按钮业务类型 insert/delete/update/select/start/stop
 *   @param {string} operType 界面按钮对应菜单按钮数据 A/B/C/D/E
 *   @param {string} text 按钮显示内容
 *
 */
export default {
  name: "filter-btn",
  props: {
    btnConfig: {
      type: Array,
      default: () => {
        return [];
      },
    },
    showBool: {
      type: Object,
      default: () => {
        return {};
      },
    },
    disableBool: {
      type: Object,
      default: () => {
        return {};
      },
    },
    loadingBool: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    buttonArr () {
      const arr = [];
      if (this.btnConfig && this.btnConfig.length)
        this.btnConfig.map((btn) => {
          if (this.showBool[btn.btnType]) arr.push(btn);
        });
      return arr;
    },
  },
  methods: {
    /**
     * 按钮点击事件 不在组件中做业务处理 往上传至业务组件进行处理
     * @param {object} val 按钮数据
     */
    handleClick (val) {
      console.log('按钮点击事件', val);
      this.$emit("handleClick", val);
    },
  },
};
</script>

<style>
</style>