Vue表头下拉选择框使用总结

1、在el-table-culumn 中，加入template 标签，使用：

<template slot="header" slot-scope="scope"><el-dropdown trigger="click" @command = "handleCommand"><span>类型</span><el-dropdown-menu slot="dropdown"><el-radio-group v-model="sx">//这里，会出现一个bug，下文有解决办法<el-dropdown-item command="属性0"><el-radio label="0">属性0</el-radio> </el-dropdown-item><el-dropdown-item command="属性1"><el-radio label="1">属性1</el-radio> </el-dropdown-item><el-dropdown-item command="属性2"><el-radio label="2">属性2</el-radio> </el-dropdown-item><el-dropdown-item command="属性3"><el-radio label="3">属性3</el-radio> </el-dropdown-item><el-dropdown-item command="属性4"><el-radio label="4">属性4</el-radio> </el-dropdown-item><el-dropdown-item command="属性5"><el-radio label="5">属性5</el-radio> </el-dropdown-item><el-dropdown-item command="属性6"><el-radio label="6">属性6</el-radio> </el-dropdown-item></el-radio-group></el-dropdown-menu></el-dropdown>
</template>
<template slot-scope="scope">（表中元素）</template>

2、设置handleCommand方法：（当时没使用handleCommand方法做缓冲，在刷新时，第一次刷新不会赋值，第二次刷新会得到上次刷新的值。）

handleCommand(command) {if(command == '属性0' ){this.sx= '0'} else if (command === '属性1') {this.sx = '1'} else if( command === '属性2') {this.sx = '2'} else if (command === '属性3') {this.sx = '3'} else if (command === '属性4') {this.sx = '4'} else if( command === '属性5') {this.sx = '5'} else if (command === '属性6') {this.sx = '6'}this.刷新方法;
},

但是在使用过程中，点击下拉框中数据时，会出现执行两次handleCommand()方法的情况。通过一天的询问与查找，得到解决办法。

问题出现在<el-radio>标签上，当点击框中数据时，数据响应一次handleCommand()方法，<el-radio>也会响应一次handleCommand()方法。所以，应该去掉<el-radio>标签与<el-radio-group>标签。

<template slot="header" slot-scope="scope"><el-dropdown trigger="click" @command = "handleCommand"><span>类型</span><el-dropdown-menu slot="dropdown"><el-dropdown-item command="属性0">属性0</el-dropdown-item><el-dropdown-item command="属性1">属性1</el-dropdown-item><el-dropdown-item command="属性2">属性2</el-dropdown-item><el-dropdown-item command="属性3">属性3</el-dropdown-item><el-dropdown-item command="属性4">属性4</el-dropdown-item><el-dropdown-item command="属性5">属性5</el-dropdown-item><el-dropdown-item command="属性6">属性6</el-dropdown-item></el-dropdown-menu></el-dropdown>
</template>
<template slot-scope="scope">（表中元素）</template>

Vue表头下拉选择框使用总结相关推荐

基于WPS实现Excel表的二级下拉选择框
基于WPS实现Excel表的二级下拉选择框第一步:先在sheet2上创建源数据第二步:创建一级下拉框第三步:创建二级下拉框报错记录: "列表源"XXXXXX 第一步:先在s ...
jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
Bootstrap 表单控件一（单行输入框input，下拉选择框select ，文本域textarea）
单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootst ...
python select模块安装_python+selenium select下拉选择框定位处理方法
一.前言总结一下python+selenium select下拉选择框定位处理的两种方式,以备后续使用时查询: 二.直接定位(XPath) 使用Firebug找到需要定位到的元素,直接右键复制XPa ...
自定义组合控件：下拉选择框
Spinner 自定义组合控件之下拉选择框项目概述下拉选择框主要是通过在EditText 下用PopupWindow 动态显示ListView 控件来实现的.下拉选择框可以方便用户的输入效率,以此 ...
js下拉 selenium_selenium的下拉选择框
今天总结下selenium的下拉选择框.我们通常会遇到两种下拉框,一种使用的是html的标签select,另一种是使用input标签做的假下拉框. 后者我们通常的处理方式与其他的元素类似,点击或使用J ...
html下拉选择框箭头改为年,CSS自定义select下拉选择框的样式(不用其他标签模拟)...
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
UI标签库专题十一：JEECG智能开发平台 DictSelect (数据字典下拉选择框)
1. DictSelect (数据字典下拉选择框) 1.1. 参数属性名类型描述是否必须默认值 typeGroupCode string 字典分组编码是 null field str ...
UI标签库专题七：JEECG智能开发平台 ComboBox (下拉选择框)
1. ComboBox (下拉选择框) 1.1. 参数属性名类型描述是否必须默认值 name string 控件名称是 null url string 远程数据访问是 null ...

Vue表头下拉选择框使用总结

Vue表头下拉选择框使用总结相关推荐

最新文章

热门文章