el-tree 添加且或条件并确定数据格式

已于 2022-11-23 15:44:39 修改
阅读量831 收藏
点赞数
分类专栏： 笔记 文章标签： vue.js elementui 前端
于 2022-11-23 15:25:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NancyFyn/article/details/127999837
版权

首先给大家看看效果

 看到这个原型之后，再去看数据结构就容易懂了。

[{
	"key": "AND", （且、或）
	"type": "group",（条件组）
	"children": [{
		"type": "condition",
		"children": [],
		"indexCode": "2",
		"indexName": "",
		"value": "123",
        "tagsAll": [],
		"operator": "5",
		"del": false
	}, {
		"type": "condition",
		"children": [],
		"indexCode": "",
		"indexName": "",
		"value": "",
        "tagsAll": [],
		"operator": "",
		"del": false
	}, {
		"key": "AND",
		"type": "group",
		"children": [{
			"type": "condition",
			"children": [],
			"indexCode": "3",
			"indexName": "",
			"value": "111",
            "tagsAll": [],
			"operator": "4",
			"del": false
		}],
		"del": false
	}, {
		"type": "condition",
		"children": [],
		"indexCode": "4",
		"indexName": "",
		"value": "0",
        "tagsAll": [],
		"operator": "1",
		"del": false
	}],
	"del": false
}]

之前想的过于复杂，导致浪费了很多时间。话不多说上代码：

<template>
  <div class="filter-condition">
    <el-tree
      :data="ruleSetInfos"
      default-expand-all
      :expand-on-click-node="false"
    >
      <span
        class="custom-tree-node display"
        style="width: 100%"
        slot-scope="{ node, data }"
        @mouseenter="mouseenter(data)"
        @mouseleave="mouseleave(data)"
      >
        <!--   条件组      -->
        <div class="display" v-if="data.type === commandTypeEnum.GROUP">
          <el-button
            class="round"
            type="success"
            round
            size="mini"
            @click="updateRuleKey(data)"
          >
            {{ ruleNameItem[data.key] }}
          </el-button>
          <el-dropdown
            trigger="click"
            size="mini"
            @command="addRuleItem($event, data, node)"
          >
            <span class="el-dropdown-link">
              <i class="el-icon-circle-plus-outline add-rules-icon"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="commandTypeEnum.CONDITION"
                >条件</el-dropdown-item
              >
              <el-dropdown-item :command="commandTypeEnum.GROUP"
                >条件组</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>

        <!--   条件     -->
        <div
          class="displaydisplay"
          v-if="data.type === commandTypeEnum.CONDITION"
        >
          {{ node.data.indexName }}
          <el-select v-model="node.data.indexCode" size="mini" placeholder="选择字段" class="simple-type-select">
            <el-option v-for="item in timeFil" :key="item.id" :label="item.modelName" :value="item.id">
            </el-option>
          </el-select>
        </div>

        <!-- 运算符 -->
        <div
          class="displaydisplay"
          v-if="data.type === commandTypeEnum.CONDITION"
        >
          <el-select v-model="node.data.operator" size="mini" placeholder="选择比较符" class="simple-type-select">
            <el-option v-for="item in OperationList" :key="item.value" :label="item.name" :value="item.value">
            </el-option>
          </el-select>
        </div>

        <!-- 输入框（属于、不属于） -->
        <div
          class="displaydisplay"
          v-if="data.type === commandTypeEnum.CONDITION  && (node.data.operator == 'IN' || node.data.operator == 'NOT IN' )"
        >
          <!-- 父盒子 -->
          <div class="father_box" @click="onclick">
            <!-- 生成的标签 -->
            <div v-for="(item, index) in node.data.TagsAll" :key="index" class="spanbox">
              <span class="tagspan">{{ item }}</span>
              <i class="span_close" @click="removeTag(index, item, node.data)"></i>
            </div>
            <!-- 输入框 
              @keyup.delete="deleteTags"-->
            <input
              placeholder="输入后按<回车>创建"
              v-model="node.data.value"
              @keyup.enter="addTags(node)"
              :style="inputStyle"
              class="inputTag"
              ref="inputTag"
              type="text"
            />
          </div>
        </div>
        <!-- 输入框 -->
        <div
          class="displaydisplay"
          v-if="data.type === commandTypeEnum.CONDITION  && (node.data.operator !== 'IN' && node.data.operator !== 'NOT IN' )"
        >
          <el-input v-model="node.data.value" size="small"></el-input>
        </div>
        <!-- 删除图标 -->
          <i
            v-show="data.del && node.parent.level !== 0"
            class="el-icon-delete-solid delete-icon"
            @click="remove(node, data)"
          >
          </i>
      </span>
    </el-tree>
  </div>
</template>

<script>
import {
  commandTypeEnum,
  ruleNameItem,
  ruleNameTypeEnum,
  OperationList,
} from "../processjos/model";

export default {
  name: "filterCondition",
  
  props: {
    timeFil: {
      type: Array,
      default: null,
    },
  },

  data() {
    return {
      flag: [],
      //输入框宽度
      inputLength: "",

      // 树节点数据
      ruleSetInfos: [{
          key: "AND", // 且/或 AND/OR
          type: "group", // 条件/条件组  group/condition
          children: [],
        }],

      // 筛选条件
      ruleNameItem: ruleNameItem,

      // 筛选条件常量
      ruleNameTypeEnum: ruleNameTypeEnum,

      // 条件/条件组常量
      commandTypeEnum: commandTypeEnum,

      OperationList: OperationList,
    };
  },
  watch: {
    //监听输入的值越多，输入框越长
    currentval(val) {
      // 实时改变input输入框宽度，防止输入内容超出input默认宽度显示不全
      this.inputLength = this.$refs.inputTag.value.length * 12 + 50;
    },
  },
  computed: {
    //计算属性：计算出动态输入框宽度
    inputStyle() {
      let style = {};
      style.width = `${this.inputLength}px`;
      return style;
    },
  },

  methods: {
    //删除tag
    removeTag(index, item, node) {
      node.TagsAll.splice(index, 1);
    },

    //回车增加tag
    addTags(node) {

      if (node.data.value) {

          //添加tag
          node.data.TagsAll.push(node.data.value);

          //清空输入框
          node.data.value = "";
      }
    },

    //点击父盒子输入框获取焦点
    onclick() {
      //   console.log(2345);
    },
    /**
     * 父组件调用
     */
    clickQ() {
      this.ruleFlag(this.ruleSetInfos)
      return this.ruleSetInfos
    },
    /**
     * 校验过滤条件非空
     */
    ruleFlag(val) {
      if (val) {
        // 每一层添加 flag
        for (let index = 0; index < val.length; index++) {
          if (val[index].type == 'group') {
            val[index].children && val[index].children.forEach(item => {
              if (item.type == 'condition') {
                if (!item.indexCode || !item.operator || ((!item.value && item.TagsAll.length < 1))) {
                  this.$message.warning('将条件输入完整')
                  this.flag.push(false)
                  return false
                } else {
                  this.flag.push(true)
                }
              } else {
                if (item.type == 'group') {
                  item.children && item.children.forEach(el => {
                     if (el.type == 'condition') {
                      if (!el.indexCode || !el.operator || (!el.value && el.TagsAll.length < 1)) {
                        this.$message.warning('将条件输入完整')
                        this.flag.push(false)
                        return false
                      } else {
                        this.flag.push(true)
                      }
                     }
                  })
                }

              }
            });
          }
        }
      }
    },
    /**
     * 修改规则key
     * @param index 数组的某一项
     */
    updateRuleKey(item) {
      if (item.key === this.ruleNameTypeEnum.AND) {
        item.key = this.ruleNameTypeEnum.OR;
        return;
      }
      item.key = this.ruleNameTypeEnum.AND;
    },

    /**
     * 添加规则
     * @param type 添加规则的类型
     * @param data 点击的当前数据
     */
    addRuleItem(type, data, node) {
      // 限制添加层级
      if (node.level == 3) {
        this.$message.warning('只可添加三层')
        return
      }
      // 添加条件组
      let ruleItem = { key: 'AND', type: 'group', children: [] };
      if (type === this.commandTypeEnum.CONDITION) {
        ruleItem = { type: 'condition', children: [], indexCode: '', indexName: '', value: '', operator: '=', TagsAll: [] };
      }
      this.append(data, ruleItem);
    },

    /**
     * 在树中添加数据
     * @param data 当前数据
     * @param ruleItem 添加的数据
     */
    append(data, ruleItem) {
      if (!data.children) {
        this.$set(data, "children", []);
      }
      data.children.push(ruleItem);
    },


    /**
     * 删除节点
     */
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children ? parent.data.children : parent.data;
      const index = children.findIndex((d) => d.$treeNodeId === data.$treeNodeId);
      children.splice(index, 1);
    },
    /**
     * 选择字段值
     */
    handleCommand(value, data, node) {
      node.data.indexCode = value;
      node.data.indexName = timeFil.find(item => item.value === value).name;
    },

    /**
     * 运算符
     */
    commandOperator(command) {
      node.data.OperationVal = OperationList.find(item => item.value === command).name;
    },

    /**
     * 清除数据
     */
    clearValue() {
      this.ruleSetInfos = [{ key: 'AND', type: 'group', children: [] }]
    },
  },
};
</script>

<style  lang="scss">

.filter-condition {
  margin-left: 50px;
  .displaydisplay {
    // margin-top: 10px;
    // margin-bottom: 10px;
    margin-left: 15px;
  }
  .el-tree-node__content {
    margin-bottom: 10px;
    height: 34px !important;
    padding-left: 3px !important;
  }

  .add-rules-icon {
    color: #ff8e18;
    margin-left: 6px;
    margin-top: 5px;
    font-size: 14px;
  }
  .display {
    display: flex;
    height: 100%;
    align-items: center;
  }
  .round {
    padding: 5px !important;
  }
  .el-dropdown-link {
    color: #409eff;
    font-size: 13px;
  }
  ::v-deep.el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }

  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }

  .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 2px dashed #ddd;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 2px dashed #ddd;
    height: 20px;
    top: 16px;
    width: 20px;
  }
  .delete-icon {
    color: #f56c6c;
    margin-top: 3px;
    margin-left: 12px;
  }

  .simple-type-select .el-input__inner {
    width: 105px;
    font-size: 12px;
    color: rgb(93, 160, 210);
    position: relative;
    bottom: 1px;
    border: none;
    background: unset;
  }
  .el-tag {
    margin-right: 5px;
  }
}

</style>

<style scoped>
/* 外层div */
.father_box {
  /* width: 600px; */
  box-sizing: border-box;
  background-color: white;
  border: 1px solid #409EFF;
  border-radius: 4px;
  font-size: 12px;
  text-align: left;
  padding-left: 5px;
  word-wrap: break-word;
  overflow: hidden;
}
/* 标签 */
.spanbox {
  display: inline-block;
  font-size: 14px;
  margin: 3px 4px 3px 0;
  background-color: #ecf5ff;
  border: 1px solid #e8eaec;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
}
/* 标签文字 */
.tagspan {
  height: 24px;
  line-height: 22px;
  max-width: 99%;
  position: relative;
  display: inline-block;
  padding-left: 8px;
  color: #409EFF;
  font-size: 14px;
  opacity: 1;
  vertical-align: middle;
  overflow: hidden;
  transition: 0.25s linear;
}
/* tag的叉叉 */
.span_close {
  padding: 0 6px 0 4px;
  opacity: 1;
  -webkit-filter: none;
  filter: none;
  color: #409EFF;
  /* font-weight: 600; */
  cursor:pointer;
}
/* 鼠标经过叉叉 */
.span_close:hover{
  background-color: #409EFF;
  border-radius: 50%;
  color: #fff;
}
.span_close:after {
  content: "\00D7";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* line-height: 27px; */
  transition: 0.3s, color 0s;
}
/* input */
.inputTag {
  margin-right: 50px;
  font-size: 16px;
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  width: auto;
  min-width: 150px;
  vertical-align: top;
  height: 32px;
  color: #495060;
  line-height: 32px;
}
/* 输入框提示文字大小 */
input:placeholder-shown {
font-size: 0.6rem;
}
</style>

非空校验可以写成轮询，我这里只有三层就没有修改，有兴趣的朋友可以修改下。

另外如果你不止一个地方使用了el-tree，要修改样式且只在当前页面有效，直接scoped是不行的，最好是在外层加一层div,使用scss。

js代码

// 筛选条件
export const ruleNameItem = {
    'AND': '且',
    'OR': '或'
  }
  
  // 筛选条件常量
  export const ruleNameTypeEnum = {
    AND: 'AND',
    OR: 'OR'
  }
  // 条件/条件组常量
  export const commandTypeEnum ={
    GROUP: 'group',
    CONDITION: 'condition'
  }

  /**
   * 运算符
   */
  export const OperationList = [
    {name: '等于', value: '='},
    {name: '不等于', value: '<>'},
    {name: '包含', value: 'LIKE'},
    {name: '不包含', value: 'NOT LIKE'},
    {name: '属于', value: 'IN'},
    {name: '不属于', value: 'NOT IN'},
  ]

写的不好，有什么问题，欢迎指出~

F N Nancy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element的el-tree控件后台数据结构的生成以及方法的抽取
11-21
最近用到了el-tree控件，主要是数据的格式，按照官网的数据格式来就可以显示节点的树形结构了。 代码参考很多 这里给出一个比较好的链接：https://www.jb51.net/article/181990.htm 代码说明在注释里写的很详细了已经，这里不再叙述说明。至于为什么抽取成这种格式的数据，那是因为ElementUI-tree规定的数据格式，你想要用这个控件，就必须按照他们规定的这个格式 来。 数据格式如下： Controller代码 @RequestMapping("/cateList") @ResponseBody public List<TbCateg
el-tree数据格式扁平化处理
感谢您阅读我的博客，如果您有任何问题或建议，请随时联系我。
03-07 457
el-tree 数据扁平化处理
el-tree目录树相关内容
最新发布
Ann_52547的博客
05-20 198
/</</
vue3 el-tree ts数据格式递归处理，获取所有父节点信息，实时筛选
weixin_40449665的博客
09-02 5388
实现el-tree筛选，其中要注意数据格式的处理以及所有父节点信息的获取
element-tree 数据格式化以及默认展示节点
weixin_47303966的博客
12-06 625
this.$refs.tree.setCurrentKey(node-key的id) 展示默认选中节点为高亮 默认加载tree expanded(data){ if(data&&data.length>0){ let item =thie.handleExpanded(data); let currNm=item.id; setTimeout(()=>{ this.$refs.tree.setCurrentKey(currNm) },3000) }, han
Tree树形控件增加属性
weixin_47093559的博客
10-27 399
Tree树形控件增加属性
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
el-tree-selected-tree
11-15
在Element UI库中，`el-tree` 是一个强大的组件，用于构建可交互的树形结构数据展示。在实际开发中，我们经常需要处理用户选择的节点，并可能需要独立展示这些选中节点，甚至允许用户在独立的树结构中进行删除操作。...
ElementUI中el-tree节点的操作的实现
10-15
在ElementUI中，`el-tree`组件用于展示树形数据，它提供了丰富的功能，包括节点的增删改查。在本教程中，我们将探讨如何实现`el-tree`节点的各种操作，包括获取选中节点的ID、添加节点、修改节点以及删除节点。 ...
项目中将普通数据转换成 el-tree 中的 tree结构
weixin_67254784的博客
08-05 323
项目中将普通数据转换成 el-tree 中的 tree结构
【vue】树形结构数据格式化（对象/数组属性键名修改、属性值不变）
栀妹儿的炼丹炉
11-26 2618
对象属性键名修改： data: { code: 0, text: '数据分析', plant: [], }, // 把data下的plant改成children data: { code: 0, text: '数据分析', children: [], }, 关键语句 let newData= JSON.parse(JSON.stringify(this.data).replace(/plant/g,"children")) 数组属性键名修改： plant: [{ plant_code: 1
关于el-tree组件的使用的小笔记
FLJ1027的博客
08-24 271
关于el-tree组件的使用 今日设计到el-tree组件的使用，有些页面需要初始化的时候将所有的节点都设置为disabled状态，不可选，点击编辑按钮，则disabled为false可选 当我们拿到后端返回的数据，如果是符合tree组件结构的时候直接进行循环递归的方法来动态设置每个节点的disabled setDisabled(data,flag){ for(var i =0;i<data.length;i++){ data[i].disabled = flag; if(data[i].childr
Vue ElementUI el-tree 动态设置节点是否显示
前端技术
02-24 2181
Vue ElementUI el-tree 动态设置节点是否显示
vue+ele爬坑之路（八）—el-tree
qq_38293570的博客
01-05 1425
需求 1、多个组织树展示，默认第一棵树展开 2、部分设备可选择，部分设备不可选择 3、自定义图标 实现代码：template代码+css样式 相关代码 1、template ``` <el-tree class="tree-line" :data="treeLeft" :icon-class="'iconfont'" @check="checkEvent" :indent="0" node-key="id" show-checkb...
element中树形控件组件设置样式
weixin_61424410的博客
07-07 3128
在实际开发中一些element-ui中的树形控件基本样式无法满足我们的设计需求，所以我们一般要进行二次修改下面是我实际开发中需要修改的样式 然而element提供的树形控件是我们的思路是给伪元素加样式实现虚线连接 拓展自定义节点内容给节点添加图标并设置不同的颜色 设置动态icon以及颜色 在script中设置其对应的数据 最终的样式 给大家把最终代码展示如下...
vue + elementUi （el-tree）
qq_52177667的博客
11-30 1689
一. 改变tree原生的样式 点击时样式 .el-tree ::v-deep.el-tree-node:focus > .el-tree-node__content { background-color: #EDF3FC !important; border-radius: 8px; } 重新设置tree的宽高 .el-tree ::v-deep.el-tree-node > .el-tree-node__content{ wi...
elment UI tree的使用及数据传参
代码青春
09-06 1076
<el-tree :data="setResuordata" show-checkbox default-expand-all node-key="resCode" :default-checked-keys="treeCheckedKeys" ref="tree" highlight-current :props="defaultProps" @check.
vue项目el-tree 懒加载实现增加、修改、删除及刷新当前子节点，render-content自定义样式
热门推荐
m0_38105640的博客
10-15 1万+
element-ui 中设计层级和动态加载节点的组件el-tree，对于前端来说，用的比较多，否则对于vue项目，要自己写render操作dom。当操作的树形结构层级比较多时，多用懒加载。例如实现如下功能，就是用el-tree实现的。 实现这个功能有几个问题 要解决： 1.改样式。官网提供的样式不能够满足开发的需要，尤其是对tree进行增删改的时候。所以需要用到render-content自定义样式。 2.加载问题。懒加载，如何插入数据。 3.增删改之后刷新问题。 前两个问题很好解决，最后一个
el-tree动态添加显示数据
10-26
el-tree是一个Vue.js的树形控件，可以用于显示层级结构的数据。要动态添加显示数据，可以通过以下步骤实现： 1. 在data中定义一个数组，用于存储树形控件的数据。 2. 在el-tree中使用:data属性绑定该数组。 3. 在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值