需求描述

• 在table的操作栏中，根据按钮的个数展现不同的样式；
• 个数未知，可能根据table row 中的某个字段状态或根据用户的操作权限等展示；
• 当个数小于或等于三个的时候 展示全部按钮；
• 当个数大于三个的时候 展示前两个按钮，剩余的按钮使用 Dropdown 组件再折叠；
• 按钮的文本，样式，事件自定义且不受影响；

最终效果

废话不多说先上图看效果

解决思路

• 首先了解 el-table-column组件中的 formatter(rowm,column,cellValue,index) 函数方法可以用来格式化渲染内容；

• 定义按钮组数据格式用来描述每个按钮（文本，样式，事件，是否显示）；

• 根据以上数据格式中每个按钮的 ”是否显示“ 动态计算出，该行（table row）中需要显示几个按钮；

• 使用 渲染函数 & JSX 按需求逻辑 动态渲染 button 或者 Dropdown；

• 按钮组定义的数据格式 参考vue官方文档 深入数据对象

参考代码