赞
踩
2022/4/28 周四
前端新手入门,如有错误,欢迎在评论区指出,非常感谢!
在需要的表头上使用 :render-header 来自定义表头
<el-table-column :render-header="button"></el-table-column>
button是一个自定义方法,里面可以返回按钮。
需注意:button方法里面返回的按钮元素,给它添加点击方法不能用@click或v-on:click,无法识别,会报错。要用箭头函数的写法 on-click={()=>this.showToday()}
我是设置了两个按钮,有个变量来记录当前点击的是哪个按钮:
data(){ return{ isShowOne: true // 控制按钮的变量,默认点击按钮一 } }, methods: { button(){ if(this.isShowOne==true){ // 如果当前点击的是按钮一,就给按钮一设置背景色 return ( <div> <el-button on-click={()=>this.showOne()} style="background: #ffc9c9; color:#606266">按钮一</el-button> <el-button on-click={()=>this.showTwo()} style="border-color: #ffffff; color:#ffffff">按钮二</el-button> </div> );} else{ // 反之则按钮二设置背景色 return ( <div> <el-button on-click={()=>this.showOne()} style="border-color: #ffffff; color:#ffffff">按钮一</el-button> <el-button on-click={()=>this.showTwo()} style="background: #ffc9c9; color:#606266">按钮二</el-button> </div> )} }, showOne(){ this.isShowOne = true; }, showTwo(){ this.isShowOne = false; }, }
另外还有按钮的默认样式(根据整个页面风格修改颜色):
.el-button{
background: #fff0;
/*border: #ffffff;*/
color: #ffffff;
font-size: 14px;
font-weight: bolder;
width: 140px;
padding: 8px;
}
效果:
固定的隐藏列,直接在需要隐藏的列上加 v-if=“false” 就可以。
如果需要按钮控制动态显示隐藏列,可以在data()里定义一个布尔值的flag,比如我这里就直接用上面控制按钮的isShowOne,给列加v-if=“isShowOne"或v-if=”!isShowOne",在点击按钮时isShowOne值被改变,列的显示隐藏状态就会互换了。
如果不止两种情况就不用布尔值了,可以直接给标志变量赋多种值。
【注意flag一定要定义在data()里,否则data的数据没有改变,页面就不会重新渲染,看不到效果】。另外,我还用了很多人说的el-table加:key=Math.random的方法,没有用,应该也是数据没有改变的原因。
点击按钮显示某些列时,表格刷新会很明显的闪烁一下,是因为el-table 重新计算表头高度
解决办法:给整个el-table 加key,:key=“toggleIndex”, 每次点击按钮时改变toggleIndex的值,就不会闪烁了
data(){ return{ toggleIndex:0, // 设置索引默认值 isShowOne: true // 控制按钮的变量,默认点击按钮一 } }, methods: { button(){ // 略,详见1 }, showOne(){ this.isShowOne = true; this.tabRadioType(this.toggleIndex); }, showTwo(){ this.isShowOne = false; this.tabRadioType(this.toggleIndex); }, // 每次需要切换时需修改布尔值和索引值,要注意,索引值只需不一样即可,没有其他特殊要求 tabRadioType(e){ this.toggleIndex = e+1; } }
(PS:一开始没有设置toggleIndex变量,就是让key在1和2之间改变,结果每间隔一次点击时,列的顺序就会倒过来,如下图,挺有趣的,包括设置key随机数:key=Math.random也是一样。所以最后设置toggleIndex让key每次加1,就不会了)
关于点击按钮变色,我最开始在button()里没写if-else,只返回了一组按钮,试图给按钮的type一个变量,点击时改变变量指向另一种样式。
但每次点击按钮后,表格数据刷新,type又回到初始值了,所以没有实现改变样式,只有第二次点击同按钮才会变
所以就给button()返回两组按钮,直接在渲染按钮时就判断当前哪个是被选中的,直接给出相应的样式。
在表格拿到数据之前,表格里会显示“暂无数据”
但我这里其实不是没有数据,只是接口查询数据时间太长,所以我想改成“查询中,请等待… …”,让用户继续在这个页面等待。
修改默认提示很简单,直接在el-table元素上加 empty-text 属性, 比如我的empty-text = “查询中,请等待…” ,就OK了:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。