element-plus 树形数据el-table 修改小三角图标

现在的版本没有这个class用不了这个方法

 /有子节点且未展开
 .el-table/deep,               el-icon-arrow-right:befor
 background:url./images/folder.png）no-repeat 03pxi
 content:
 display:block
 width:16px;
 height:16px;
 font-size:16px
 background-size:16px
 /有子节点且已展开

如果你用的Vue，不要在局内样式(scope)内写，因为污染不进去，你可以在你所需的地方增加一个类名，然后


```css

<style lang="scss">
.init{
  .el-table{
      .el-icon-arrow-right{
        //do sth.

        &:before{
          //样式
        }
      }
  }
}
</style>

```

你可以看下这个问题的回答https://ask.csdn.net/questions/7613018
这篇博客也不错, 你可以看下element-plus里的el-table获取表格数据索引下标
除此之外, 这篇博客: element-plus el-table表格多选中的 2 接着自定义每列的复选框 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

其实上面代码已经可以实现每一列都有复选框，并且在el-table标签添加select事件也可以实现点击每一行的事件，但是如果你的数据一开始就是选中的，或者你想自定义复选框，那么就要另想办法了

html

<el-table
  ref="tableRef"        
  :data="tableList"        
  :header-cell-style="headerStyle"        
  :cell-style="cellStyle"       
  @select-all="selectAll">        
  <el-table-column
    size="small"         
    type="selection"          
    align="center">          
    <template #default="scope">          
      <el-checkbox v-model="scope.row.checked" @change="select"/>          
     </template>         
  </el-table-column>
  ...
</el-table>

import { ref, reactive, onMounted } from 'vue'
const tableRef = ref() // 定义ref
const tableList = ref([ // 表格数据
  {
    checked: true,
    ...
  },
  {
    checked: false,
    ...
  },
  ...
])
const headerStyle = reactive({ background: '#FAFAFA', color: '#666' }) // table样式
const cellStyle = reactive({ height: '45px' }) // 单元格样式
onMounted(() => {
  select()
})
const selectAll = row => { // 全选
  tableList.value.forEach(t => {
    t.checked = !!row[0]
  })
}
const select = () => { // 反选
  tableList.value.forEach(t => {
    multipleTableRef.value.toggleRowSelection(t, t.checked)
  })
}

这样就可以实现自定义复选框已经全选反选功能了，至于自定义样式只要在el-table-column的插槽中添加想要的图标将原本的复选框遮住，然后将事件绑定给图标即可

以下回答由chatgpt基于相关博客总结生成:
根据提供的参考资料，目前版本的 element-plus 的树形数据 el-table 中似乎没有提供类来修改小三角图标的方法。但是，我们可以通过自定义表头的方式来实现修改小三角图标的效果。
解决方案如下：
1. 首先，在 el-table 中添加一个 slot，如下所示：
```
<el-table-column label="标题1">
  <template slot="header" slot-scope="scope">
    <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/>
  </template>
</el-table-column>
```
1. 为了取消 ESLint 的规范检索报错，我们可以在该行代码上方加上行注释 ，如下所示：
```

<template slot="header" slot-scope="scope">
  <el-input v-model="search" size="mini" placeholder="输入关键字搜索"/>
</template>
```
1. 确保将表格数据正确地传递给 el-table，并且每个对象有一个唯一的标识符作为 row-key。例如，在 data 中定义一个 JZPFData 数组，并为 el-table 设置 row-key，如下所示：
```
data() {
  return {
    JZPFData: [
      {
        itemStage: "审批",
        implementStage: "*规划",
        content: "***",
        endtime: "2020",
        begintimeAble: true,
        endtimeAble: false,
      },
      {
        itemStage: "审批",
        implementStage: "*规划",
        content: "***",
        endtime: "2020",
        begintimeAble: true,
        endtimeAble: true,
      }
      // 其他数据...
    ]
  }
}
```
1. 在 el-table 中设置 row-key 属性，并使用 getRowKey 方法来返回唯一标识符，如下所示：
```
<el-table :data="JZPFData" stripe row-key="labelStockId">
  
</el-table>
```
1. 在 Vue 实例中定义 getRowKey 方法，返回数据对象中的唯一标识符，如下所示：
```
methods: {
  getRowKey(row) {
    return row.labelStockId;
  }
},
```
通过以上步骤，你可以自定义 el-table 的表头，并修改小三角图标的效果。请注意，自定义表头只适用于单个列，无法用于修改多选表格的列名。如果以上解决方案仍不能满足你的需求，很抱歉，我无法提供其他解决方案。