在后台列表中，为了优化布局，使用Vue组件动态管理按钮显示。组件`button-groups`根据`number`属性限制显示的按钮数量，多余的按钮收纳到“更多”下拉菜单。在组件的`beforeUpdate`和`created`生命周期钩子中初始化`slots`。然而，在执行如置顶/取消置顶等操作并重新拉取数据后，按钮状态未能正确更新，且更多按钮的菜单始终隐藏，问题可能源于数据同步或组件更新逻辑。
在后台列表中通常会有比较多的操作按钮 过多的按钮影响布局 也影响操作 因此想通过vue的组件来控制显示的按钮个数 多余的按钮自动被收进一个特殊的 更多 按钮里面，效果图：
组件定义：
Vue.component('button-groups', {
render(createElement) {
return createElement('div', {
class: 'vu-button-groups',
'data-i': Math.random() * 1000
}, [
...this.slots.slice(0, this.number),
createElement('ElTooltip', {
attrs: {
placement: 'bottom',
effect: 'light',
'popper-class': 'vu-button-groups-tooltip'
}
}, this.slots.length > this.number ? [
createElement('div', {class: 'vu-button-groups-more', slot: 'content'}, this.slots.slice(this.number)),
createElement('ElLink', ['更多', createElement('i', {class: 'el-icon-arrow-down'})])
] : [])
]);
},
props: {
number: {
type: Number,
default: 4
}
},
data() {
return {
slots: [],
key: 0,
}
},
beforeUpdate() {
this.init();
},
created() {
this.init()
},
methods: {
init() {
this.slots = this.$slots.default.filter(v => {
v.key = this.key ++;
return v.tag !== undefined
})
}
}
});
使用组件：
编辑
删除
{{scope.row.is_top == 1 ? '取消置顶' : '置顶'}}
开播记录
v-if="scope.row.showOrder" :size="size">订单
上面的代码实现了基本样式 但是在反复操作后会出现按钮功能功能异常的情况 例如：置顶/取消置顶操作后从服务器 重新拉取数据(拉取当前页，翻页) 置顶/取消置顶按钮的状态未根据数据变化做响应 更多按钮下的菜单处于一直隐藏的状态 请问是什么问题导致出现了这种问题
扫一扫
706
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
