如何对上面的树形表格扩展

对于上述的树形表格，我们可以对其进行扩展，例如添加展开/折叠按钮、添加操作列、添加搜索等功能。

1. 添加展开/折叠按钮

我们可以通过在 el-table-column 中添加 slot-scope 插槽，渲染展开/折叠按钮来实现：

<el-table-column width="50">
  <template slot-scope="{ row }">
    <span v-if="row.children && row.children.length" @click.stop="toggleExpand(row)">
      <i :class="row.expanded ? 'el-icon-minus' : 'el-icon-plus'"></i>
    </span>
  </template>
</el-table-column>

上述代码中，我们首先判断当前行是否有子节点，如果有则渲染展开/折叠按钮，点击按钮时触发 toggleExpand 方法。toggleExpand 方法用于切换当前行的展开/折叠状态，并更新其子节点的展开/折叠状态。

2. 添加操作列

我们可以在 el-table-column 中添加操作列，例如添加编辑和删除按钮：

<el-table-column label="操作">
  <template slot-scope="{ row }">
    <el-button size="mini" @click.stop="edit(row)">编辑</el-button>
    <el-button size="mini" type="danger" @click.stop="remove(row)">删除</el-button>
  </template>
</el-table-column>

上述代码中，我们通过 el-button 渲染编辑和删除按钮，并在点击按钮时触发 edit 和 remove 方法。

3. 添加搜索功能

我们可以添加一个搜索框，用于过滤表格数据：

<el-input v-model="searchText" placeholder="请输入搜索内容"></el-input>

上述代码中，我们通过 el-input 渲染搜索框，并将其绑定到 searchText 属性上。

同时，我们需要在 el-table 中添加 filter-method 属性，用于自定义过滤方法：

<el-table :data="tableData" :tree-props="{children: 'children'}" :filter-method="filterNode">
  <!-- 表格列定义 -->
</el-table>

上述代码中，我们将 filter-method 属性设置为 filterNode 方法，该方法用于过滤表格节点。

最后，我们在组件中定义 filterNode 方法：

methods: {
  filterNode(value, data) {
    if (!value) return true;
    return data.name.indexOf(value) !== -1;
  }
}

上述代码中，我们通过判断节点的 name 属性是否包含搜索关键字 value，来决定节点是否显示。

这样，我们就可以对树形表格进行扩展了。