建设网站收废品,苏州建站仿站,湖州做网站,各大网站的404element-ui el-select选择器组件下拉框增加自定义按钮
先看效果 原理#xff1a;在el-select下添加禁用的el-option#xff0c;将其value绑定为undefined#xff0c;然后覆盖el-option禁用状态下的默认样式即可
示例代码如下#xff1a;
templatediv class…element-ui el-select选择器组件下拉框增加自定义按钮
先看效果 原理在el-select下添加禁用的el-option将其value绑定为undefined然后覆盖el-option禁用状态下的默认样式即可
示例代码如下
templatediv classextra-button-select stylepadding: 20pxel-select v-modelselectedel-optionv-foroption in options:keyoption.id:labeloption.label:valueoption.id/el-optionel-option :valueundefined disabled stylecursor: pointerel-button typetext clickonClickBtn1i classel-icon-menu/i 按钮1/el-button/el-optionel-option :valueundefined disabled stylecursor: pointerel-button typetext clickonClickBtn2i classel-icon-menu/i 按钮2/el-button/el-option/el-select/div
/templatescript
export default {name: extra-button-select,data() {return {selected: 1,options: [{id: 1,label: Option 1,},{id: 2,label: Option 2,}]}},methods: {onClickBtn1() {this.$message.info(点击了按钮1)},onClickBtn2() {this.$message.info(点击了按钮2)}}
}
/scriptstyle scoped langscss
/style
