Crud树形查询区

简介 #

CRUD 树形查询区用于在表格左侧展示层级结构的树形目录，点击叶子节点时自动将参数传递给表格数据集，实现按层级筛选数据的功能。适用于组织架构、产品分类、区域字典等父子层级数据的快速查询场景。

关键配置 说明
树区域数据集 查询 father/child 父子关系
_label 参数 点击节点自动传递，值为 child 值
自定义树形 可通过模板重写 body_tree 自定义样式和行为

输入图片说明

开启树形查询区 #

  • 新建一个懒加载数据集,假设是3号数据集
  • 写入以下查询, 查询父,子关系
-- 最简单方式, 如果无重名的情况
select father, child from table

-- 如果有重名的情况就需要使用到编码的方式
select father, child, fatherName, childName from table
  • 在"数据管理"的面板中, 填写"树区域",比如本案例为3
  • 点击保存, 然后需要重新刷新页面才会生效
  • 此时即可见树形查询区域在左方

实现查询功能 #

  • 当点击叶子节点时, 会自动向表格数据传递参数名为"_label", 并自动刷新表格数据
  • 传递的值默认为child的值
  • 如果需要变更传值, 需要在查询中带入名为param的字段,此时将传递的是param的值, 比如
select father, child, father+child as param from table

自定义树形区域 #

  • 可以在模板中通过重写树形区域实现
{% block body_tree %}
<div class="tree_div"  style="width:150px;font-size:12px">
  <el-tree :data="tree_data"  @node-click="handleNodeClick">
        <span slot-scope="{ node, data }">
        <span :class="data.children?'el-icon-folder-opened':''">{[ data.label ]}</span>
  </el-tree>
</div>
{% endblock %}

自定义树形点击动作 # 

vapp.handleNodeClick=(node, data) =>{
    if(data.isLeaf){
        let param = data.data.param||data.data.id;
        if(param == filter_param._label){param = ''}
        ds_setParam('_label',param);
        vapp.refreshTable();
        vapp.data_filter();
    }
}
Edit Edit this page