使用el-table的树形数据过程中遇到的一些问题

小菜鸟记录自己遇到的坑

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  
}