Vue:树形el-table的自定义文本过滤

树形el-table的自定义文本过滤

<template>
  <div class="app-container">
    <el-input v-model="search" placeholder="Filter keyword" style="margin-bottom:30px;"/>
    <el-table
      ref="menuTree"
      :data="treeTable"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="name"
        label="名称"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="path"
        label="访问路径"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="component"
        label="组件路径"
        sortable
        width="180">
      </el-table-column>
      <el-table-column
        prop="permissionValue"
        label="权限值">
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <!-- v-if="node.level == 1 || node.level == 2" v-if="node.level == 3" v-if="node.level == 4"-->
          <el-button
            v-if="(scope.row.level == 1 || scope.row.level == 2) "
            type="text"
            size="mini"
            @click="() => {dialogFormVisible = true, menu.pid = scope.row.id}">添加菜单
          </el-button>
          <el-button
            v-if="scope.row.level == 3"
            type="text"
            size="mini"
            @click="() => {dialogPermissionVisible = true, permission.pid = scope.row.id}">添加功能
          </el-button>
          <el-button
            v-if="scope.row.level == 4 "
            type="text"
            size="mini"
            @click="() => updateFunction(scope.row)">修改功能
          </el-button>
          <el-button
            v-if="scope.row.level != 4 "
            type="text"
            size="mini"
            @click="() => getById(scope.row)">修改
          </el-button>
          <el-button
            type="text"
            size="min