 
 
html部分
 <div class="org-left">
        <el-input v-model="filterText" placeholder="" size="default" />
        <el-tree ref="treeRef" class="filter-tree" :data="treeData" :props="defaultProps" :default-expand-all="true"
          node-key="id" :filter-node-method="filterNode" @node-click="handleNodeClick" />
      </div>
  <el-table :data="tableData" :size="tableSize" v-loading="loading" style="width: 100%"
          height="calc(100vh - 300px)">
          <el-table-column type="index" label="序号" width="60" v-if="checkedCities.indexOf(0) !== -1" />
          <el-table-column prop="name" label="机构名称" show-overflow-tooltip
            v-if="checkedCities.indexOf(1) !== -1"></el-table-column>
          <el-table-column prop="code" label="唯一编码" show-overflow-tooltip
            v-if="checkedCities.indexOf(2) !== -1"></el-table-column>
          <el-table-column prop="sort" label="排序" show-overflow-tooltip
            v-if="checkedCities.indexOf(3) !== -1"></el-table-column>
          <el-table-column prop="remark" label="备注" show-overflow-tooltip
            v-if="checkedCities.indexOf(4) !== -1"></el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button size="small" text type="primary" @click="onOpenEditRole('edit', scope.row)" class="button"
                v-if="scope.row.pid != 0">修改</el-button>
              <el-button size="small" text type="primary" @click="onRowDel(scope.row)"  class="button">删除</el-button>
            </template>
          </el-table-column>
        </el-table>js部分
// 调用 Tree 实例对象的 filter 方法来过滤树节点。 方法的参数就是过滤关键字
const filterText = ref('')
const treeRef = ref()
const defaultProps = {
  children: 'children',
  label: 'title',
}
watch(filterText, (val) => {
  treeRef.value!.filter(val)
})
const queryForm = ref({
  pageNo: 1,
  pageSize: 10,
  name: '',
  code: '',
  pid: 0,
})
// 过滤查询
const filterNode = (value: string, data: any) => {
  if (!value) return true
  return data.title.includes(value)
}
// 切换tree pid
const handleNodeClick = async (node: any) => {
  queryForm.value.pid = node.id;
  const res = await getOrgValue(queryForm.value)
  tableData.value = res.rows
}














![Python - Wave2lip 环境配置与 Wave2lip x GFP-GAN 实战 [超详细!]](https://img-blog.csdnimg.cn/4b843e02011c4d868eb76a258f593183.png)



