el-tree 点击父节点展示全部，点击子节点显示对应数据

html搜索代码

 <el-input
            v-model="areaName"
            placeholder="请输入区域名称"
            clearable
            style="width: 150px"
          />

 树形结构代码

<el-tree
          class="side-btn"
          :highlight-current="true"   //选中高亮
          :data="areaOptions"  //获取接口树结构
          :props="defaultProps"  //校验规则 本次使用不到
          :expand-on-click-node="false"
          :filter-node-method="filterNode"

          :show-checkbox="true" //显示选择框
         :check-strictly="true" // 适用于多选框
                                在显示复选框的情况下，严格的遵循父子不互相关联的做法
          ref="tree"
          :check-on-click-node="true" //点击节点的时候选中节点
          default-expand-all //默认节点展开
          @node-click="handleNodeClick"  //节点被点击
        />

html视频部分

 <div class="side-inner">
        <div
          class="video-item"
          v-for="(item, index) in cameraInfoList"
          :key="index"
          v-show="index < 16"
        >
          <div class="video-title">
            <i>场景名称：{{ item.cameraName }}</i>
          </div>
//视频  或者使用video标签
          <iframe
            :ref="`iframe${index}`"
            :src="item.webrtcUrl"
            allowfullscreen
            allow="autoplay; fullscreen"
            style="width: 98%; height: 98%"
          ></iframe>
        </div>
      </div>

javascript

return中变量

   return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      camera: false,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
   
      // 用户表格数据
      cameraInfoList: [],
      // 弹出层标题
      title: "",
      // 区域树选项
      areaOptions: undefined,
      // 是否显示弹出层
      open: false,
      cameraAddOptions: [],
      // 区域名称
      areaName: undefined,

      defaultProps: {
        children: "children",
        label: "label",
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 16,
        cameraName: null,
        cameraAdd: null,
      },
      // 表单校验
      rules: {},
    };

1、部门刷选树

 watch: {
    // 根据名称筛选区域树
    areaName(val) {
      this.$refs.tree.filter(val);
    },
  },

2、树结构

  /** 查询用户列表 */
    getList() {
      this.loading = true;
      listCameraInfo(this.queryParams).then((response) => {
        this.cameraInfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
  /** 查询区域下拉树结构  areaOptions */
    getTreeselect() {
      treeselect().then((response) => {
        this.areaOptions = response.data;
      });
    },
    // 筛选节点  filterNode  handleNodeClick
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.cameraAdd = data.id === 1 ? "" : data.id;
      this.getList();
    },