1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > VUE element-ui之table表格表头下拉筛选功能

VUE element-ui之table表格表头下拉筛选功能

时间:2018-09-10 13:52:11

相关推荐

VUE element-ui之table表格表头下拉筛选功能

步骤:

在需要筛选的列中插槽法:

<el-table-column prop="mount" label="交易量区间" align="left"><!-- eslint-disable-next-line --><template slot="header" slot-scope="scope"><el-dropdown trigger="click" size="medium " @command="handleCommand"><span style="color:#909399">{{menuText }}<i class="el-icon-arrow-down el-icon--right" /></span><el-dropdown-menu slot="dropdown"><el-dropdown-itemv-for="(item, index) in section":key="index":command="item">{{item }}</el-dropdown-item></el-dropdown-menu></el-dropdown></template></el-table-column>

data中定义下拉列表:

data() {return {menuText: '交易量区间',section: ['一万','两万','三万']}}

在methods中定义筛选方法:

// 表格筛选handleCommand(item) {//这里定义方法可在选取时触发this.menuText = item}

效果如图:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。