无敌版可配置的查询构建器React Query Builder

最新推荐文章于 2024-11-20 16:24:58 发布

原创

最新推荐文章于 2024-11-20 16:24:58 发布

· 1.8k 阅读

2 ·

版权

文章标签：

#react.js #typescript #javascript

基于上一篇《自定义一个玩出花来的查询构建器React Query Builder》

在此基础上又做了一次升级改造，让我来看看升级后的查询构建器长什么样吧！

左、右两侧支持Cascader级联菜单选择
支持级联菜单Tooltip悬浮提示
右侧可通过Switch开关控制：输入框input/Cascader级联菜单

核心功能代码实现

1、左右两侧均为自定义组件

1）修改QueryBuilder组件的配置信息

<QueryBuilder
      disabled={
   disabled}
      query={
   query}
      operators={
   operators}
      combinators={
   combinators}
      translations={
   translations}
      controlElements={
   controlElements}
      controlClassnames={
   controlClassnames}
      onQueryChange={
   (q) => {
   
        setQuery(q);
      }}
    />

2）对controlElements进行修改：valueEditor、fieldSelector

const controlElements = {
   
  valueEditor: (props: any) => (
    <EndValueEditor
      ruleId={
   ruleId}
      eventId={
   eventId}
      fromDetail={
   fromDetail}
      dimension={
   dimension}
      {
   ...props}
    />
  ),
  fieldSelector: (props: any) => (
    <CustomValueEditor
      ruleId={
   ruleId