Vue3用el-table写树状表格遇到的问题（搜索时：行样式变更 以及 对应父节点展开）

在Vue3中使用Element Plus的el-table组件实现树状结构时，可以通过以下步骤来实现搜索时行样式的变更以及对应父节点的展开：

1. 使用递归组件来构建树状结构。
2. 使用v-for来遍历树的每一个节点。
3. 使用v-if或计算属性来根据搜索条件显示或隐藏行。
4. 监听搜索框的输入事件，更新搜索关键词。
5. 在更新关键词时，遍历整棵树，记录匹配搜索条件的节点及其所有父节点的展开状态。
6. 使用el-table的row-style或row-class属性来应用样式。

以下是一个简化的示例代码：

<template>
  <el-input v-model="searchKey" @input="handleSearch" placeholder="搜索"></el-input>
  <el-table :data="treeData" row-key="id" :expand-row-keys="expandRowKeys" :tree-props="{ children: 'children' }">
    <el-table-column prop="label" label="名称"></el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      searchKey: '',
      treeData: [...], // 树状结构的数据
      expandRowKeys: []
    };
  },
  methods: {
    handleSearch() {
      this.expandRowKeys = [];
      this.searchTree(this.treeData);
    },
    searchTree(nodes) {
      nodes.forEach(node => {
        if (node.label.includes(this.searchKey)) {
          // 当前节点符合搜索条件
          this.expandRowKeys.push(node.id);
        }
        if (node.children && node.children.length > 0) {
          // 递归子节点
          this.searchTree(node.children);
        }
      });
    }
  }
};
</script>

在这个例子中，我们有一个树状结构的数据treeData，每个节点都有一个label属性。我们使用el-input组件来监听输入事件，并通过handleSearch方法来更新expandRowKeys数组，该数组包含了应该展开以显示子节点的节点ID。searchTree方法递归遍历整棵树，检查每个节点是否符合搜索条件，并将符合条件的节点ID添加到expandRowKeys中。

请注意，这个示例假设每个节点都有唯一的id属性，并且你需要根据实际的数据结构调整代码中的属性名。此外，这个例子没有包括行样式变更的代码，因为Element Plus的el-table组件已经提供了相关的类和样式钩子，你可以通过row-style或row-class来自定义行的样式。