erp_fans/src/components/byTable/ElementsMapping.vue

<template>
  <div>
    <el-button v-for="(i,index) in getCellList" @click="i.click()" :key="index" v-bind="i.attrs" v-debounce
               v-show="index < 2">{{ i.attrs.label }}</el-button>
    <el-dropdown v-show="getCellList && getCellList.length>2">
      <span class="el-dropdown-link">
        <span class="more-btn">更多</span>

      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item :class="index > 1 ? '' : 'dn'" @click="i.click()" v-for="(i,index) in getCellList" :key="index">
            <span :style="i.attrs.type == 'danger' ? 'color:#f56c6c' : 'color:#409eff'">{{ i.attrs.label}}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<script>
import {
  defineComponent,
  getCurrentInstance,
  computed,
  ref,
  h,
  withDirectives,
  resolveDirective,
  resolveComponent,
} from "vue";
export default defineComponent({
  props: {
    parent: {
      type: Object,
      default() {
        return {};
      },
    },
    row: {
      type: Object,
      default() {
        return {};
      },
    },
    cellList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  setup(props) {
    const { proxy } = getCurrentInstance();
    const getCellList = computed(() => {
      return props.cellList.filter((cell) => cell && Object.keys(cell).length);
    });
    return {
      getCellList,
    };
  },
});
</script>
<style scoped>
.more-btn {
  line-height: 34px;
  font-size: 14px;
  color: #ff9315;
  padding: 6px;
}
.dn {
  display: none !important;
}
:deep(.el-dropdown-link) {
  margin-left: 0px !important;
}
</style>