小菜鸟记录自己遇到的坑
1.点击按钮展开折叠行
<el-table
:data="tableNameList"
class="catalog-table "
row-key="id"
:tree-props="{
children: 'children',
}"
ref="table3"
:row-class-name="dispointClass"
default-expand-all
@row-click="(row,column,e)=>handleConnectionSearch(row,column,e,'table3')"
>
添加row-click事件,默认是三个参数。因为我使用了三个table表格,通过传递ref的值,也就是’table3‘可以区分开当前事件对应的table表格。用箭头函数,添加想要的参数。
handleConnectionSearch(row, column, event,str) {
eval("this.$refs." + str + ".toggleRowExpansion(row)");
}
使用el-table自带的toggleRowExpansion方法,实现折叠展开。
2. 给点击行添加一个cursor:pointer的样式
:row-class-name="dispointClass"
使用组件中自带的row-class-name的属性
dispointClass(row){
if(row.row.str=='查看'){
return 'pointer'
}
else{
return ''
}
}
在官方文档里,row-class-name有两个参数,一个row用来写判断,一个rowIndex用来写行数。只需要用row.row获取到每一行,每一行有一个str的属性,根据str的值来判断添加class。
<style lang="scss">
.el-table{
.pointer{
cursor: pointer !important;
}
}
</style>
将css样式写在scss中,最好不要写在scope里,因为样式会失效,不能成功的添加。
3.row-style的返回类型
目前文档中要求的返回类型是Object,所以直接返回String是无效的,要写成下面这种。
rowStyle(row, rowIndex) {
let styleJson = {}
if (rowIndex==0) {
//设置第一行样式
styleJson = {
'color': 'red'
}
} else {
styleJson = {}
}
return styleJson
}