ElementUI笔记

2022/4/28 周四

前端新手入门，如有错误，欢迎在评论区指出，非常感谢！

---

1. 表头加自定义按钮

在需要的表头上使用 :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;
}

效果：

2. 隐藏列

固定的隐藏列，直接在需要隐藏的列上加 v-if=“false” 就可以。

如果需要按钮控制动态显示隐藏列，可以在data()里定义一个布尔值的flag，比如我这里就直接用上面控制按钮的isShowOne，给列加v-if=“isShowOne"或v-if=”!isShowOne"，在点击按钮时isShowOne值被改变，列的显示隐藏状态就会互换了。

如果不止两种情况就不用布尔值了，可以直接给标志变量赋多种值。

【注意flag一定要定义在data()里，否则data的数据没有改变，页面就不会重新渲染，看不到效果】。另外，我还用了很多人说的el-table加:key=Math.random的方法，没有用，应该也是数据没有改变的原因。

3. 表格刷新闪烁问题

点击按钮显示某些列时，表格刷新会很明显的闪烁一下，是因为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，就不会了）

4. 关于el-button点击按钮变色

关于点击按钮变色，我最开始在button()里没写if-else，只返回了一组按钮，试图给按钮的type一个变量，点击时改变变量指向另一种样式。

但每次点击按钮后，表格数据刷新，type又回到初始值了，所以没有实现改变样式，只有第二次点击同按钮才会变

所以就给button()返回两组按钮，直接在渲染按钮时就判断当前哪个是被选中的，直接给出相应的样式。

5. “暂无数据”默认提示修改

在表格拿到数据之前，表格里会显示“暂无数据”

但我这里其实不是没有数据，只是接口查询数据时间太长，所以我想改成“查询中，请等待… …”，让用户继续在这个页面等待。

修改默认提示很简单，直接在el-table元素上加 empty-text 属性， 比如我的empty-text = “查询中，请等待…” ，就OK了：