万维网站域名,建筑八大员证报考网站,深圳东门地铁站叫什么,wordpress视频笔记vue2elementui 实现表格中操作列不定个数按钮的折叠展开#xff0c;可以根据自己的需求自行修改样式和展示等。基本代码如下#xff1a;
templatediv classtable-action-col-box :ref_bf${rowId}div :ref_bf${rowId}_but…vue2elementui 实现表格中操作列不定个数按钮的折叠展开可以根据自己的需求自行修改样式和展示等。基本代码如下
templatediv classtable-action-col-box :ref_bf${rowId}div :ref_bf${rowId}_buttonslot/slot/divel-popover popper-classtable-action-btn-pop :placementplacement widthauto :triggertrigger :refpopover_bf${rowId}div classtable-action-btn-pop-contentslot/slot/divtemplate slotreferencespan v-showisFoldslot v-if$slots.popoverReference namepopoverReference/sloti v-else classel-icon-more fold-icon :style{ marginLeft: ${buttonGap}px }/i/span/template/el-popover/div
/templatescript langts
import { Component, Vue, Prop, Ref, PropSync } from vue-property-decorator;
Component({components: {}
})
export default class TableActionCol extends Vue {Prop({ default: null }) rowId: number | string;Prop({ default: 2 }) maxLength: number; // 最多展示按钮的个数不包含更多按钮Prop({ default: bottom }) placement: string;Prop({ default: hover }) trigger: string;Prop({ default: 10 }) buttonGap: number;protected isFold: boolean false;protected currentRowMaxLength 2;mounted() {this.currentRowMaxLength this.maxLength;this.domInit();}protected domInit() {this.$nextTick(() {let children (this.$refs[_bf${this.rowId}_button] as any)?.children || [];const newChildren Array.from(children);let popoverChildren (this.$refs[popover_bf${this.rowId}] as any)?.$refs?.popper?.children || [];const popoverButtons popoverChildren popoverChildren[0]?.children;for (let k 0, len children.length; k len; k) {if (children[k].style.display none) {this.currentRowMaxLength;newChildren[k] none;continue;}if (k this.currentRowMaxLength - 1) {children[k].style.display none;}}// popover是否展示this.isFold newChildren.filter(item item ! none)?.length this.maxLength;// popover元素for (let k 0, len popoverButtons.length; k len; k) {if (children[k].style.display ! none) {popoverButtons[k].style.display none;}}});}
}
/script
style langscss scoped
.table-action-col-box {display: flex;align-items: center;.fold-icon {cursor: pointer;}
}
/style
style langscss
.table-action-btn-pop {padding: 12px 0;.table-action-btn-pop-content {display: flex;flex-direction: column;}.el-button {margin-left: 0;}
}
/style
