vue2 el-table 行按钮过多，按钮超出指定个数，显示为下拉菜单（简单的自定义组件01）

1. 上图

2. 优化前 按钮太多不美观
   

3. 优化后 默认展示三个按钮 超出显示下拉菜单
   

4. 上代码 封装按钮组件 OperateBtn.vue

// OperateBtn.vue

<template>
  <div v-if="items">
    <div v-if="items.length > maxLength" class="btn-box">
      <el-tooltip
        effect="dark"
        :content="el.name"
        placement="right"
        v-for="(el, i) in showBtn"
        :key="i"
      >
        <el-button
          type="text"
          size="small"
          :disabled="el.disabled"
          @click="routeEvent(operateItem, el.name)"
        >
          <span> {{ el.name }}</span>
        </el-button>
      </el-tooltip>

      <el-dropdown trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
          <em class="el-icon-more" style="color: #409eff"></em>
        </span>
        <el-dropdown-menu slot="dropdown" class="table-opetation-more-dropdown">
          <el-dropdown-item
            v-for="(item, index) in dropData"
            :key="index"
            :command="beforeHandleCommand(operateItem, item.name, item.code)"
            class="link-text"
          >
            <el-button type="text" size="small">
              {{ item.name }}
            </el-button>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div v-else style="display: flex">
      <div v-for="(item, index) in items" :key="index" class="btn-box">
        <el-tooltip effect="dark" placement="right" :content="item.name">
          <el-button
            type="text"
            size="small"
            :disabled="item.disabled"
            @click="routeEvent(operateItem, item.name)"
          >
            <span> {{ item.name }}</span>
          </el-button>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  comments: {},
  props: {
    // 按钮集合
    items: {
      type: Array,
      default: () => {
        return [];
      },
    },
    // 按钮行数据
    operateItem: {
      type: Object,
      default: () => {},
    },
    // 默认超过2个按钮显示隐藏下拉，否则平铺
    maxLength: {
      type: Number,
      default: () => 2,
    },
  },
  data() {
    return {
      dropData: [], // 下拉的按钮组
      showBtn: [], // 不隐藏的按钮
    };
  },
  mounted() {
    if (this.items.length > this.maxLength) {
      this.showBtn = this.items.slice(0, this.maxLength);
      this.dropData = this.items.slice(this.maxLength);
    }
  },
  methods: {
    // 正常按钮点击事件
    routeEvent(data, name) {
      this.$emit("routeEvent", data, name);
    },
    beforeHandleCommand(data, name, code) {
      return {
        data: data,
        name: name,
        code: code,
      };
    },
    // 下拉菜单点击事件
    handleCommand(command) {
      this.routeEvent(command.data, command.code);
    },
  },
};
</script>
<style lang="scss" scoped>
.link-text .el-button {
  width: 100%;
  text-align: left;
}
.btn-box {
  .el-button {
    min-width: 0px;
    margin-right: 12px;
  }
}
.el-dropdown-link {
  vertical-align: text-top;
}
.el-dropdown {
  vertical-align: middle;
}
</style>

5. 组件使用

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column fixed prop="date" label="日期"> </el-table-column>
    <el-table-column prop="name" label="姓名"> </el-table-column>
    <el-table-column prop="province" label="省份"> </el-table-column>
    <el-table-column prop="city" label="市区"> </el-table-column>
    <el-table-column prop="zip" label="邮编"> </el-table-column>
    <el-table-column fixed="right" label="操作">
      <template slot-scope="scope">
        <!-- 使用按钮组件 -->
        <OperateBtn
          :items="operateBtnStatus.Draft"
          @routeEvent="operateEvent"
          :operateItem="scope.row"
          :maxLength="2"
        ></OperateBtn>
      </template>
    </el-table-column>
  </el-table>
</template>
  
<script>
import OperateBtn from "@/components/OperateBtn.vue"; //引入组件
export default {
  components: { OperateBtn }, //按钮组件
  methods: {
    // 所有的按钮点击事件 可在此处更具按钮code 进行判断，做对应的逻辑处理
    operateEvent(data, name) {
      console.log(data, name, 999999999);
    },
  },
  data() {
    return {
     // 按钮集合
      operateBtnStatus: [
        {
          name: "Edit",
          code: "Edit1",
        },
        {
          name: "Delete",
          disabled: true, // 可设置按钮禁用
          code: "Delete1",
        },
        {
          name: "view1",
          code: "view1",
        },
        {
          name: "view2",
          code: "view2",
        },
        {
          name: "view3",
          code: "view3",
        },
        {
          name: "view4",
          code: "view4",
        },
        {
          name: "view5",
          code: "view5",
        },
        {
          name: "view6",
          code: "view6",
        },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
    };
  },
};
</script>

vue3

<template>
    <div v-if="props.items">
        <div v-if="props.items.length > props.maxLength" class="btn-box">
            <el-tooltip effect="dark" :content="el.name" placement="right" v-for="(el, i) in showBtn" :key="i">
                <el-button :type="el.type || 'primary'" size="small" :icon="el.icon?el.icon:''" link :disabled="el.disabled"
                    @click="routeEvent(props.operateItem, el.name)">
                    <span> {{ el.name }}</span>
                </el-button>
            </el-tooltip>

            <el-dropdown trigger="hover" @command="handleCommand">
                <span class="el-dropdown-link">
                    更多<el-icon  style="color: #409eff"><ArrowDown /></el-icon>
                </span>
                <template #dropdown>
                    <el-dropdown-menu slot="dropdown" class="table-opetation-more-dropdown">
                        <el-dropdown-item v-for="(item, index) in dropData" :key="index"
                            :command="beforeHandleCommand(props.operateItem, item.name, item.code)" class="link-text">
                            <el-button :type="item.type || 'primary'" link :icon="item.icon?item.icon:''" size="small">
                                {{ item.name }}
                            </el-button>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
        <div v-else style="display: flex">
            <div v-for="(item, index) in props.items" :key="index" class="btn-box">
                <el-tooltip effect="dark" placement="right" :content="item.name">
                    <el-button :type="item.type || 'primary'" link :icon="item.icon?item.icon:''" size="small" :disabled="item.disabled"
                        @click="routeEvent(operateItem, item.name)">
                        <span> {{ item.name }}</span>
                    </el-button>
                </el-tooltip>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const props = defineProps({
    items: {
        type: Array,
        default: () => {
            return [];
        },
    },
    operateItem: {
        type: Object,
        default: () => { },
    },
    maxLength: {
        type: Number,
        default: () => 2,
    },
})

const dropData = ref([])
const showBtn = ref([])

onMounted(() => {
    console.log(props.items, props.maxLength)
    if (props.items.length > props.maxLength) {
        showBtn.value = props.items.slice(0, props.maxLength);
        dropData.value = props.items.slice(props.maxLength);
    }
})
const emit = defineEmits(['routeEvent'])
// 正常按钮点击事件
const routeEvent = (data, name) => {
    emit("routeEvent", data, name);
}
const beforeHandleCommand = (data, name, code) => {
    return {
        data: data,
        name: name,
        code: code,
    };
}
// 下拉菜单点击事件
const handleCommand = (command) => {
    routeEvent(command.data, command.code);
}
</script>
<style lang="scss" scoped>
.link-text .el-button {
    width: 100%;
    text-align: left;
}

.btn-box {
    .el-button {
        min-width: 0px;
        margin-right: 12px;
    }
}

.el-dropdown-link {
    vertical-align: text-top;
}

.el-dropdown {
    vertical-align: middle;
}
</style>

使用

  <!-- 使用按钮组件 -->
  <OperateBtn :items="operateBtnStatus" @routeEvent="operateEvent" :operateItem="row"
            :maxLength="2"></OperateBtn>

const operateBtnStatus = ref([
    {
        name: "编辑",
        code: "1",
        icon:"EditPen"
    },
    {
        name: "删除",
        code: "2",
        type:'danger',
        icon:"Delete"
    },
    {
        name: "增加子项",
        code: "3",
        icon:"Plus"
    },
    {
        name: "上移",
        code: "4",
        icon:"Top"
    }, 
    {
        name: "下移",
        code: "5",
        icon:"Bottom"
    },
])

6. 以上代码仅用作日常记录，方便需要时可节约时间，直接复用！