1、表头时间排序(根据传参后端返回)
在el-table标签输入@sort-change=“handleCommand”
handleCommand(column) {
let sortingType = column.order
if(sortingType == "ascending") {
this.$set(this.query, 'sort', 'asc')//传参
this.getData()//重新获取数据
}else {
this.$set(this.query, 'sort', 'desc')//传参
this.getData()//重新获取数据
}
},
2、超出文本显示省略号,鼠标悬浮显示全部
超出文本显示省略号
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
鼠标悬浮显示全部
el-table-column中添加show-overflow-tooltip
修改显示框的样式
.el-tooltip__popper {
width: 50%;/*修改宽度*/
background: #000 !important;/*背景色 !important优先级*/
opacity: 0.8 !important;/*背景色透明度*/
color: #FFFFFF !important;/*字体颜色*/
font-size: 14px!important;
line-height: 18px;
}
3、动态修改表头class,未能及时更新
添加slot-scope="scope"
4、选中行高亮显示
el-table添加highlight-current-row
点击行选中事件
el-table添加@row-click=“showHistory”
showHistory(row,column,event) {
console.log(row.id)
this.getDetailHistory(row.id)//掉后台接口传参
},