el-tree 与table表格联动

 

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
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/169515.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

用对了吗?正确打开文件传输助手的方式

在这个高速发展的信息时代&#xff0c;我们每天都会面临一个重要的问题&#xff1a;如何在手机和电脑之间快速、高效地传输文件&#xff1f; 有时候&#xff0c;我们需要把工作中的一份报告从电脑传到手机&#xff0c;以便在路上查看&#xff1b;有时候&#xff0c;我们又想把手…

【Flask使用】全知识md文档,4大部分60页第3篇:状态cookie和session保持

本文的主要内容&#xff1a;flask视图&路由、虚拟环境安装、路由各种定义、状态保持、cookie、session、模板基本使用、过滤器&自定义过滤器、模板代码复用&#xff1a;宏、继承/包含、模板中特有变量和函数、Flask-WTF 表单、CSRF、数据库操作、ORM、Flask-SQLAlchemy…

PC 477B西门子触摸屏维修6AV7853-0AE20-1AA0

西门子触摸屏维修故障有&#xff1a;上电黑屏, 花屏,暗屏,触摸失灵,按键损坏,电源板,高压板故障,液晶,主板坏等,内容错乱、进不了系统界面、无背光、背光暗、有背光无字符&#xff0c;上电无任何显示 &#xff0c;Power灯不亮但其他一切正常&#xff0c;双串口无法通讯 &#x…

密码加密解密之路

1.背景 做数据采集&#xff0c;客户需要把他们那边的数据库连接信息存到我们系统里&#xff0c;那我们系统就要尽可能的保证这部分数据安全&#xff0c;不被盗。 2.我的思路 1.需要加密的地方有两处&#xff0c;一个是新增的时候前端传给后端的时候&#xff0c;一个是存到数…

MySQL 之多版本并发控制 MVCC

MySQL 之多版本并发控制 MVCC 1、MVCC 中的两种读取方式1.1、快照读1.2、当前读 2、MVCC实现原理之 ReadView2.1、隐藏字段2.2、ReadView2.3、读已提交和可重复读隔离级别下&#xff0c;产生 ReadView 时机的区别 3、MVCC 解决幻读4、总结 MVCC&#xff08;多版本并发控制&…

公网环境下使用VNC远程连接Ubuntu系统桌面

文章目录 前言1. ubuntu安装VNC2. 设置vnc开机启动3. windows 安装VNC viewer连接工具4. 内网穿透4.1 安装cpolar【支持使用一键脚本命令安装】4.2 创建隧道映射4.3 测试公网远程访问 5. 配置固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址5.3 测试…

基于变形卷积和注意机制的带钢表面缺陷快速检测网络DCAM-Net(论文阅读笔记)

原论文链接->DCAM-Net: A Rapid Detection Network for Strip Steel Surface Defects Based on Deformable Convolution and Attention Mechanism | IEEE Journals & Magazine | IEEE Xplore DCAM-Net: A Rapid Detection Network for Strip Steel Surface Defects Base…

基于Qt中操作MySQL数据库示例

# 一、安装驱动 ##(1)安装 在Qt中操作MySQL数据库首先要安装mysql的驱动文件,将MySQL下的libmusql.dll文件复制到Qt的安装路径下的bin文件夹下即可。 直接将libmysql.dll文件粘贴到此文件夹中。 ## (2)验证驱动是否安装成功 复制成功之后来测试一下驱动程序是否安装成功…

轻松实现公网访问本地内网搭建的WBO白板【内网穿透】

文章目录 前言1. 部署WBO白板2. 本地访问WBO白板3. Linux 安装cpolar4. 配置WBO公网访问地址5. 公网远程访问WBO白板6. 固定WBO白板公网地址7. 结语 前言 WBO在线协作白板是一个自由和开源的在线协作白板&#xff0c;允许多个用户同时在一个虚拟的大型白板上画图。该白板对所有…

Harmony Ble 蓝牙App (一)扫描

Harmony Ble 蓝牙App &#xff08;一&#xff09;扫描 前言正文一、创建工程二、工程配置① 权限配置② Debug配置③ UI配置 三、扫描① 扫描接口② 扫描类 四、业务处理① Slice的生命周期② 蓝牙开关和动态权限请求 五、扫描设备六、显示设备① 自定义蓝牙类② 提供者③ 显示…

【EI会议征稿】第三届能源利用与自动化国际学术会议(ICEUA 2024)

第三届能源利用与自动化国际学术会议&#xff08;ICEUA 2024&#xff09; 2024 3rd International Conference on Energy Utilization and Automation (ICEUA 2024) 2024年第三届能源利用与自动化国际学术会议&#xff08;ICEUA 2024&#xff09;将于2024年3月15-17日在中国武汉…

细说MySQL数据类型

TOC 目录 MySQL数据类型 数据类型分类 数值类型 tinyint类型 有符号tinyint范围测试 无符号tinyint范围测试 bit类型 bit类型的显示方式 bit类型的范围测试 float类型 有符号float范围测试 无符号float范围测试 decimal类型 字符串类型 char类型 char类型测试 …

微服务架构中的 熔断和降级

文章目录 熔断判定服务的健康状态服务恢复正常 降级跨服务降级自身服务提供有损服务具体案例分析 熔断 微服务架构中&#xff0c;如果需要保障可用性&#xff0c;其中一个方式就是 熔断。熔断在微服务架构里面是指 当微服务本身出现问题的时候&#xff0c;它会拒绝新的请求&am…

关于RecyclerView的瀑布流 分割线左右间距问题

记录一下开发遇到的RecyclerView 的 瀑布流 左右间距设置问题。 在GridLayoutManager中 &#xff0c;item的布局顺序为 在该布局中&#xff0c;他的index就是左右左右&#xff0c;position所对应的itemView就是准确的。即 左0&#xff0c;右1&#xff0c;左2&#xff0c;右3&a…

建议收藏《Verilog代码规范笔记_华为》

华为verilog编程规范是坊间流传出来华为内部的资料&#xff0c;其贴合实际工作需要&#xff0c;是非常宝贵的资料&#xff0c;希望大家善存。至于其介绍&#xff0c;在此不再赘述&#xff0c;大家可看下图详细了解&#xff0c;感兴趣的可私信移知教育老师领取《Verilog代码规范…

Colab跑项目

这里写目录标题 Colab文件目录路径显示更改colab当前工作文件夹Colab挂载谷歌云盘colab使用命令&#xff08;从这开始看&#xff0c;前面no zuo no die)最紧要&#xff0c;首先&#xff0c;修改笔记本设置使用启用gpu![在这里插入图片描述](https://img-blog.csdnimg.cn/591a6c…

qsort

qsort void*修饰后pv不能1&#xff0c;-1也不能解引用 例子 /* qsort example */ #include <stdio.h> /* printf */ #include <stdlib.h> /* qsort */int values[] { 40, 10, 100, 90, 20, 25 };int compare (const void * a, const void * b) {return…

指针变量和地址

A.指针变量和地址 理解了内存和地址的关系&#xff0c;我们再回到C语⾔&#xff0c;在C语⾔中创建变量其实就是向内存申请空间&#xff0c;比如&#xff1a; #include <stdio.h> int main() {int a 10;return 0; } ⽐如&#xff0c;上述的代码就是创建了整型变量a&…

Threejs_05 几何体顶点索引

Threejs中的任何一个几何体都是由若干个索引点构成的&#xff0c;然后这些索引点其实构成的都是三个坐标的三角形。 使用顶点坐标构建几何体 1.我们需要一个支持几何体属性的物料 //创建几何体(三角形) const geometry new THREE.BufferGeometry(); 2.构造一个顶点坐标组 …

51单片机直流电机控制

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pwm波形&#xff1f;1.1高低电平交互&#xff0c;LED亮灭。1.2 驱动电机时&#xff1f;1.3 怎么调节电机的速度&#xff1f; 二、怎么用51单片机产生PWM波形…