之前实现过的简单的条件树功能如下图：
经过最新客户需求确认，上述条件树还需要再次改造，以满足正常需要！
最新暴改后的功能如下红框所示：
页面功能
主页面逻辑代码：
<template><div class="flex-col"><div id="container" class="c-view"></div><el-button type="primary" plain style="width: 120px;" @click="doQuery">开始搜索</el-button></div> </template> <script> import { Graph } from '@antv/x6' import Hierarchy from '@antv/hierarchy' import '@antv/x6-vue-shape' import querytrees from './queryCondition.vue' //这是我的vue组件，作为子节点展示在思维导图上 import queryrelative from './queryRelative.vue'import { findItem, lastChild, setData, addChildNode, removeNode, randomId } from './fun'export default {data() {return {graphData: {'id': '1','type': 'original—add','width': 80,'height': 30,"children": [// {// "id": 0.28207584597793156,// "type": "queryrelative", //关系节点// "width": 44,// "height": 44,// "data": {// "relative": "and" //and并且 or或者// },// "children": [// {// "id": 0.32858917851150116,// "type": "condition-text", //条件节点// "width": 90,// "height": 44,// "level": 1, //判断它是第几级的条件节点// "edgeText": "",// "data": {// "complete": true,// "form": {} //你的业务数据// }// },// {// "id": 0.30546487070416783,// "type": "vue-shape", //自定义组件 业务节点// "width": 744,// "height": 44,// "level": 1,// "edgeText": "",// "data": {// "complete": false,// "form": {} //你的业务数据// }// }// ]// }]} //默认只有一个根节点}},mounted() {this.init()},methods: {//初始化⽅法doQuery() {let vft = (obj) => {let empty = obj.children.length == 0if (obj.type == 'relative') {empty = false}else {if (obj.data) {empty = !obj.data.complete}else {for (let i = 0; i < obj.children.length; i++) {empty = vft(obj.children[i])if (empty) {break}}}}return empty}if (vft(this.graphData)) {this.$modal.msgError("请先确认查询条件")}else {//组装查询语句// let cft = (obj) => {// let stms = null// if (obj.type == 'relative') {// obj.children.forEach(e => {// if (e.children && e.children.length > 0) {// e.children.forEach(p => {// let at = cft(p)// if (!stms) {// stms = at// }// else {// stms = stms + ' ' + e.data.relative + ' ' + at// }// })// }// else {// if (!stms) {// stms = e.data.form.topForm.value + e.data.form.conditionForm.value + e.data.form.valueForm.value// }// else {// let t = e.data.form.topForm.value + e.data.form.conditionForm.value + e.data.form.valueForm.value// stms = stms + ' ' + obj.data.relative + ' ' + t// }// }// })// }// else {// obj.children.forEach(p => {// debugger// let at = cft(p)// if (!stms) {// stms = at// }// else {// stms = stms + p.data.relative + at// }// })// }// return stms// }this.$emit('input', { sql: "", tree: this.graphData.children })}},init() {let self = thisGraph.registerNode('original—add',{inherit: 'rect',width: 80,height: 30,label: '+纳入条件',attrs: { //样式代码body: {rx: 4,ry: 4,stroke: '#037AFB',fill: '#037AFB',strokeWidth: 1,event: 'add:original' //根节点点击事件},label: {fontSize: 14,fill: 'white',event: 'add:original'//根节点点击事件}}},true,)//自定义vue 业务节点Graph.registerVueComponent('queryrelative',{template: `<queryrelative/>`,components: {queryrelative}},true)//自定义vue 业务节点Graph.registerVueComponent('querytrees',{template: `<querytrees/>`,components: {querytrees}},true)// 弯的边Graph.registerEdge('mindmap-edge',{inherit: 'edge',router: {name: 'manhattan',args: {startDirections: ['right'],endDirections: ['left']}},connector: {name: 'rounded'},attrs: {line: {targetMarker: '',stroke: '#A2B1C3',strokeWidth: 2}}, //样式代码zIndex: 0},true,)// 直的边Graph.registerEdge('straight-edge',{inherit: 'edge',attrs: {}, //样式代码zIndex: 0},true,)//新增限定条件Graph.registerNodeTool('add-condition',{inherit: 'button', // 基类名称，使用已经注册的工具名称。markup: [{tagName: 'rect',selector: 'button',attrs: {fill: '#296FFF',cursor: 'pointer',width: 32,height: 28}},{tagName: 'image',selector: 'icon',attrs: {'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SYCuQ6HHs5cAAAAAAAAAAAAAARQnAQ',cursor: 'pointer',width: 16,height: 16,x: 8,y: 6}}],x: '100%',y: '100%',offset: { x: -32, y: -72 },onClick({ cell }) {const { id } = cellconst dataItem = findItem(this.graphData, id).nodeconst lastNode = lastChild(dataItem)//找到当前node的最后一级，添加if (addChildNode(lastNode.id, '并且', graphData)) {render(graph, this.graphData)}}}, true)//关系节点 点击增加条件事件Graph.registerNodeTool('relative:add-condition', {inherit: 'button', // 基类名称，使用已经注册的工具名称。markup: [{tagName: 'rect',selector: 'button',attrs: {fill: '#296FFF',cursor: 'pointer',width: 32,height: 28}},{tagName: 'image',selector: 'icon',attrs: {'xlink:href': 'https://gw.alipayobjects.com/mdn/rms_43231b/afts/img/A*SYCuQ6HHs5cAAAAAAAAAAAAAARQnAQ',cursor: 'pointer',width: 16,height: 16,x: 8,y: 6}}],x: '100%',y: '100%',offset: { x: -32, y: -72 },onClick({ cell }) {const { id } = cellif (addChildNode(id, '', this.graphData)) render(graph, this.graphData)}}, true)//边增加条件Graph.registerEdgeTool('edge:add-condition', {inherit: 'button', // 基类名称，使用已经注册的工具名称。markup: [{tagName: 'rect',selector: 'button',attrs: {fill: '#296FFF',cursor: 'pointer',fontSize: 16,width: 20,height: 20,rx: 2,ry: 2,stroke: '#296FFF',strokeWidth: 1}},{tagName: 'text',selector: 'label',textContent: '+',attrs: {x: 5,y: 15,fontSize: 16,cursor: 'pointer',fill: '#ffff'}}],distance: '100%',offset: { y: -10, x: -10 },onClick({ cell }) {debuggerconst { node, parent } = findItem(self.graphData, cell.target.cell)const newId = randomId()const childP = {children: [node],id: newId,type: 'vue-shape',width: 80,height: 40,level: 2,component: 'queryrelative',data: { relative: 'and', type: 'document', options: [{ label: '同病人', value: '1' }, { label: '同病历', value: '2' }, { label: '同报告', value: '3' }], defaultValue: '1' }}const currentIndex = parent.children.findIndex(item => item.id === node.id)parent.children[currentIndex] = childPlet anode = addChildNode(newId, '', self.graphData)anode.width = 550anode.component = 'querytrees'if (anode) {render(graph, self.graphData)}}}, true)let graph = new Graph({background: { color: '#fff' },container: document.getElementById('container'),panning: { enabled: true },selecting: { enabled: true },keyboard: { enabled: true },grid: true,mousewheel: {enabled: true,modifiers: ['ctrl', 'meta']},interacting: { nodeMovable: false }})const render = (graph, graphData) => {const result = Hierarchy.mindmap(graphData, {direction: 'H',getHeight(d) {return d.height},getWidth(d) {return d.width},getHGap() {return 40},getVGap() {return 20},getSide: () => {return 'right'}})const cells = []const traverse = (hierarchyItem, parentId) => {if (hierarchyItem) {const { data, children } = hierarchyItemconst node = graph.createNode({...data,shape: data.type,x: hierarchyItem.x,y: hierarchyItem.y,component: data.component})if (parentId) {//有父级则插入父级const parent = graph.getCellById(parentId)parent && parent.addChild(node)}cells.push(node)//子节点边if (children) {children.forEach((item) => {const { id, data: itemData } = itemcells.push(graph.createEdge({shape: itemData.edgeText ? 'straight-edge' : 'mindmap-edge',source: {cell: hierarchyItem.id,anchor: {name: itemData.type === 'topic-child' ? 'right' : 'center',args: {dx: itemData.type === 'topic-child' ? -16 : '25%'}}},target: { cell: id, anchor: { name: 'left' } },labels: [{ attrs: { text: { text: itemData.edgeText || '' } } }]}),)traverse(item, node.id)})}}}traverse(result)graph.resetCells(cells)// graph.scaleContentToFit({ maxScale: 1 })graph.centerContent()}//根结点添加graph.on('add:original', ({ node }) => {debuggerif (this.graphData.children.length == 0) {const { id } = nodelet anode = addChildNode(id, '', this.graphData)anode.id = randomId()anode.type = "vue-shape" //自定义组件 业务节点anode.width = 550anode.height = 44anode.level = 1anode.edgeText = ""anode.data = {complete: false,form: {formType: 1,topForm: {label: '',value: ''},conditionForm: {},valueForm: {label: '',value: ''},extra: {}} //你的业务数据}anode.component = 'querytrees'anode.children = []if (anode) {render(graph, this.graphData)}}else if (this.graphData.children.lastObject().type != 'relative') {const { id } = nodelet tlist = this.graphData.childrenthis.graphData.children = []let anode = addChildNode(id, '', this.graphData)anode.type = "vue-shape"anode.width = 80;anode.height = 40;anode.level = 1;anode.component = 'queryrelative';anode.data = {"relative": "and" //and并且 or或者, options: [{ label: '同病人', value: '1' }, { label: '同病历', value: '2' }, { label: '同报告', value: '3' }], defaultValue: '1'}let xlist = []tlist.forEach(element => {element.id = randomId(),xlist.push(element)});xlist.push({id: randomId(),type: "vue-shape", //自定义组件 业务节点width: 550,height: 44,level: 1,edgeText: "",component: 'querytrees',data: {complete: false,form: {formType: 1,topForm: {label: '',value: ''},conditionForm: {},valueForm: {label: '',value: ''},extra: {}} //你的业务数据}})anode.children = xlistif (anode) {render(graph, this.graphData)}}else {const { id } = nodelet tlist = this.graphData.childrenthis.graphData.children = []let anode = addChildNode(id, '', this.graphData)anode.type = "vue-shape"anode.component = 'queryrelative'anode.width = 80;anode.height = 40;anode.level = 1;anode.data = {"relative": "and" //and并且 or或者}let xlist = []tlist.forEach(x => {xlist.push(x)})xlist.push({id: randomId(),type: "vue-shape", //自定义组件 业务节点width: 550,height: 44,level: 1,edgeText: "",component: 'querytrees',data: {complete: false,form: {formType: 1,topForm: {label: '',value: ''},conditionForm: {},valueForm: {label: '',value: ''},extra: {}} //你的业务数据}})anode.children = xlist// tlist.push(anode)this.graphData.children = [anode]if (anode) {render(graph, this.graphData)}}})//节点数据变化graph.on('node:change:data', ({ cell, node }) => {debuggersetData(self.graphData, node.id, node.data)const dataItem = node.getData()cell.setData({ ...dataItem, complete: dataItem.complete, isEdit: true })})graph.on('node:removed', ({ cell, node }) => {removeNode(node.id, self.graphData)render(graph, self.graphData)})//节点聚焦 增加工具栏目graph.on('node:mouseenter', ({ node }) => {// if (['condition-text', 'relative'].includes(node.shape)) {// if (!this.isExistUnComplete()) { //判断当前是否有未填写完成的vue组件节点// if (node.shape === 'condition-text') {// node.setAttrs({ body: { fill: '#E9F0FF', stroke: '#296FFF' } })// }// this.addTool(node)// }// }})//节点失焦 移除工具栏graph.on('node:mouseleave', ({ node }) => {// if (['condition-text', 'relative'].includes(node.shape)) {// if (node.shape === 'condition-text') {// node.setAttrs({ body: { stroke: '#CCC', fill: '#fff' } })// }// this.removeTool(node)// }})//边 悬浮事件graph.on('edge:mouseenter', ({ edge }) => {//不是 根结点下第一个关系节点 并且 没有未完成的节点 可添加const targetNode = graph.getCellById(edge.target.cell)const targetNodeData = findItem(this.graphData, edge.target.cell).nodeconst isChild = targetNodeData.level ? targetNodeData.level === 1 : true //不是限定节点 可添加if (!(edge.source.cell === '1' && targetNode.shape === 'relative') && isChild && !this.isExistUnComplete()) {edge.addTools(['edge:add-condition'])}})//边 失焦graph.on('edge:mouseleave', ({ edge }) => {if (!this.isExistUnComplete()) {//判断当前是否有未填写完成的vue组件节点edge.removeTools(['edge:add-condition'])}})render(graph, this.graphData)},isExistUnComplete() {return false}} } </script> <style rel="stylesheet/scss" lang="scss" scoped> .flex-col {width: 100%;height: 310px;display: flex;flex-direction: column;justify-content: center;align-items: center; }.c-view {height: 260px;width: 100%; }.topic-image {visibility: hidden;cursor: pointer; }.x6-node:hover .topic-image {visibility: visible; }.x6-node-selected rect {stroke-width: 2px; } </style>
涉及到的组件一
queryCondition.vue
<template><div class="condition" :class="[complete ? 'ny-view' : 'dy-view']" :style="{ width: lineTextWidth + 'px' }"><el-form v-if="!complete" ref="form" :model="form" label-width="0" inline><el-row :gutter="10"><el-col :span="(form.formType != 2) ? 9 : 6"><el-form-item class="w-100 flex-row"><el-select class="search-options" v-model="form.topForm.value" filterable clearableplaceholder="请选择" :loading="remoteLoading" remote :remote-method="searchKeysAction"><el-option v-for="item in topFormOptions" :key="item.formItemId" :label="item.label":value="item.formItemId"></el-option></el-select><el-button class="search-icon" icon="el-icon-plus" @click="showCheck = true"></el-button></el-form-item></el-col><el-col :span=5><el-form-item class="w-100"><el-select v-model="form.conditionForm.value" placeholder="关系" @change="conditionFormChanged"><el-option v-for="item in optionsList()" :key="item.label" :label="item.label":value="item.value"></el-option></el-select></el-form-item></el-col><el-col :span="(form.formType != 2) ? 5 : 8"><el-form-item class="w-100"><el-select v-if="form.formType == 3" v-model="form.valueForm.value" placeholder="请选择"><el-option v-for="item in valuesOptions" :key="item.value" :label="item.label":value="item.value"></el-option></el-select><div v-else-if="form.formType == 2" :key="renderKey"><el-date-picker class="w-100"v-if="(form.conditionForm.value != '9' && form.conditionForm.value != '10')"v-model="form.valueForm.value" format="yyyy.MM.dd" type="date"placeholder="选择日期"></el-date-picker><el-date-picker class="w-100" v-else v-model="form.valueForm.value" format="yy.MM.dd"type="daterange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker></div><el-input class="w-100" v-else v-model="form.valueForm.value" placeholder="对比值"></el-input></el-form-item></el-col><el-col :span=5><el-form-item class="w-100"><div class="flex-row w-100"><el-button type="danger" @click="onDelAction">删除</el-button><el-button type="primary" @click="onSubmit">确定</el-button></div></el-form-item></el-col></el-row></el-form><div v-else :style="{ width: lineTextWidth + 'px' }" @click="reEditAction"><span class="top-view">{{ topText }}</span><span class="con-view">{{ conditionText }}</span><span class="val-view">{{ valueText }}</span></div><check-crf v-if="showCheck" @input="itemSelected" :inTreeQuery="true" :workSingle="true" /></div> </template><script>// import { elForm, elFormItem, elInput, elSelect, elOption } from 'element-ui'//在这需要再次按需引入对应组件 import { getTextWidth, setData, removeNode, randomId } from "./fun" import CheckCrf from '../crf/components/check-crf.vue' import project from '../../api/project/project'export default {name: 'queryCondition',inject: ["getGraph", "getNode"],components: { CheckCrf },data() {return {showCheck: false,complete: false,form: {//1数值型条件 conditionForm为等于、不等于、大于、大于等于、小于、小于等于、为空、不为空//2日期条件 conditionForm为晚于、不晚于、早于、不早于、时间段内、时间段外、为空、不为空//3复选框 conditionForm为是、否//4其他类型 conditionForm为包含、不包含、等于、不等于、为空、不为空formType: 1,topForm: {label: '',value: ''},conditionForm: {label: '',value: ''},valueForm: {label: '',value: '',},//原始组件所有属性extra: {}},topFormOptions: [],lineTextWidth: 550,topText: '用户姓名',conditionText: '包含',valueText: 'dudu',renderKey: randomId(),valuesOptions: [],remoteLoading: false}},mounted() {const self = this;let node = this.getNode()const data = node.getData();if (data) {this.complete = data.completethis.form = data.formthis.topText = this.form.topForm.labelthis.conditionText = this.form.conditionForm.labelif (this.form.formType == 3) {this.valueText = this.form.valueForm.label}else {this.valueText = this.form.valueForm.value}}// 监听数据改变事件// node.on("change:data", ({ current }) => {// debugger// });this.renderUI()},methods: {conditionFormChanged(e) {if (this.form.formType == 2) {//必须强制刷新一下对应的DOM，否则会出现日期选择框弹出位置错误或者无法弹出的问题this.renderKey = randomId()this.form.valueForm.value = ""}},searchKeysAction(query) {if (query !== '') {this.remoteLoading = true;project.getCrfKeys(query).then(res => {res.forEach(element => {element.formItemId = element.code});this.remoteLoading = falsethis.topFormOptions = res})} else {this.options = [];}},itemSelected(raw) {let e = raw.firstObject()let cp = e.componentlet label = cp.config.labellet fid = e.codethis.form.topForm.label = labelthis.form.topForm.value = fidthis.form.extra = eif (!this.topFormOptions.containsObject(fid)) {let p = { ...e, label: label, formItemId: fid }this.topFormOptions.addObject(p)}if (cp.typeId === 'INPUT') {this.form.formType = 1}else if (cp.typeId === 'DATE') {this.form.formType = 2}else if (cp.typeId === 'SELECT' || cp.typeId === 'CHECKBOX' || cp.typeId === 'RADIO') {this.form.formType = 3this.valuesOptions = cp.config.options}else {this.form.formType = 4}this.showCheck = false},renderUI() {let width = getTextWidth(this.topText + this.conditionText + this.valueText, 14, "Arial, Helvetica, sans-serif")this.lineTextWidth = width;this.lineTextWidth += 10;this.lineTextWidth += 20;},optionsList() {if (this.form.formType == 1) {let opList = [{ label: '包含', value: '11' },{ label: '等于', value: '7' },{ label: '不等于', value: '8' },{ label: '大于', value: '3' },{ label: '大于等于', value: '4' },{ label: '小于', value: '5' },{ label: '小于等于', value: '6' },{ label: '为空', value: '2' },{ label: '不为空', value: '1' }]return opList}else if (this.form.formType == 2) {let opList = [{ label: '等于', value: '7' },{ label: '不等于', value: '8' },{ label: '晚于', value: '5' },{ label: '不晚于', value: '4' },{ label: '早于', value: '3' },{ label: '不早于', value: '6' },{ label: '时间段内', value: '9' },{ label: '时间段外', value: '10' },{ label: '为空', value: '2' },{ label: '不为空', value: '1' }]return opList}else if (this.form.formType == 3) {let opList = [{ label: '等于', value: '7' },{ label: '不等于', value: '8' },]return opList}else {let opList = [{ label: '包含', value: '11' },{ label: '不包含', value: '12' },{ label: '等于', value: '7' },{ label: '不等于', value: '8' },{ label: '为空', value: '2' },{ label: '不为空', value: '1' }]return opList}},onSubmit() {let flabel = this.optionsList().filter(p => p.value == this.form.conditionForm.value).firstObject()?.labellet ext = this.topFormOptions.filter(p => p.formItemId == this.form.topForm.value)let topText = ext.firstObject()?.labellet vtext = this.form.valueForm.valuelet tipText = nullif (!topText || topText.length == 0) {tipText = '未选择条件字段'}else if (!flabel || flabel.length == 0) {tipText = '未选择条件关系'}else if (!vtext || vtext.length == 0) {tipText = '未选择条件对比值'}if (tipText) {this.$modal.msgError(tipText)}else {this.form.conditionForm.label = flabelthis.topText = topTextthis.conditionText = flabelif (this.form.formType == 3) {vtext = this.valuesOptions.filter(p => p.value == this.form.valueForm.value)[0].labelthis.form.valueForm.label = vtext}this.valueText = vtextthis.form.extra = ext.firstObject()this.complete = truelet node = this.getNode()const dataItem = {complete: this.complete,form: {...this.form}}let graphData = node.parentsetData(graphData, node.id, dataItem)this.renderUI()let data = {mapDbName: this.form.extra.mapDbName,mapTblName: this.form.extra.mapTblName,dataDbName: this.form.extra.dataDbName,dataTblName: this.form.extra.dataTblName,dataColName: this.form.extra.dataColName,fieldType: this.form.extra.fieldType,fieldSource: this.form.extra.fieldSource,code: this.form.topForm.value,operator: this.form.conditionForm.value,value: this.form.valueForm.value}let cv = parseInt(this.form.conditionForm.value)if (this.form.formType == 2 && ((cv == 9 || cv == 10))){data.start = this.form.valueForm.value[0].date2text("yyyy-MM-dd") + " 00:00:00"data.end = this.form.valueForm.value[1].date2text("yyyy-MM-dd") + " 23:59:59"}project.queryTreeAction(data).then(res => {})}},onDelAction() {let graph = this.getGraph()let node = this.getNode()this.$confirm('确定删除此条件?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then((cmd) => {if (cmd == 'confirm') {graph.removeNode(node.id)}})},reEditAction() {this.complete = false},checkBtnGroupClose() {this.showCheck = false}} } </script><style lang="scss" scoped> .condition {padding: 0px 10px;height: 100%;background: white;border-radius: 6px;border: 1px solid #EFF4FF;display: flex;flex-direction: row;justify-content: center;align-items: center; }.dy-view {min-width: 550px;background: #EFF4FF;border: 1px solid #5F95FF; }.ny-view {width: auto; }.flex-row {display: flex;flex-direction: row;justify-content: center;align-items: center; }.top-view {white-space: nowrap;color: black;font-size: 14px;font-family: Arial, Helvetica, sans-serif; }.con-view {color: gray;font-size: 14px;padding: 0px 5px;font-family: Arial, Helvetica, sans-serif; }.val-view {color: black;font-size: 14px;font-family: Arial, Helvetica, sans-serif; }.search-options {width: calc(100% - 34px); }.search-icon {position: absolute;border-left: none;width: 32px;height: 32px;margin-left: -4px;background-color: #F5F7FA; }::v-deep {.el-form-item--small {margin: 0px;vertical-align: middle !important;}.el-button--small {padding-left: 10px;padding-right: 10px;}.el-input-group__append {padding-right: 15px;}.el-range__close-icon {display: none;}.el-checkbox--small {height: auto !important;} } </style>
涉及到组件二
queryRelative.vue
<template><div class="condition dy-view flex-row"><div class="flex-row l-flex l-hover" style="position: relative;" :class="{ 'nl-flex': relative == 'or' }"><el-popover placement="bottom" ref="refPop" width="80" trigger="hover" class="h-100 flex-row"popper-class="pop-grid-view"><el-radio-group v-model="radio" @input="radioChanged"><el-radio :label="item.value" v-for="item in optionsList">{{ item.label }}</el-radio></el-radio-group><el-image slot="reference" style="width: 20px; height: 20px":src="require('@/assets/images/sameR.png')"></el-image></el-popover><el-image class="m-view" :src="require('@/assets/images/downArrow.png')"></el-image></div><div class="flex-row r-flex label-text" :class="{ 'nr-flex': relative == 'or' }" @click="relativeChanged">{{ relative == 'or' ? '或者' : '并且' }}</div></div> </template><script>// import { elForm, elFormItem, elInput, elSelect, elOption } from 'element-ui'//在这需要再次按需引入对应组件 import { getTextWidth, setData, removeNode, randomId } from "./fun"export default {name: 'queryRelative',inject: ["getGraph", "getNode"],components: {},data() {return {radio: '1',relative: 'and',optionsList: [],}},mounted() {let node = this.getNode()const data = node.getData();this.relative = data.relativethis.optionsList = data.optionsthis.radio = data.defaultValue},methods: {radioChanged() {this.$refs['refPop'][0].doClose()},relativeChanged() {this.relative = this.relative == 'and' ? 'or' : 'and'let node = this.getNode()const dataItem = {relative:this.relative,defaultValue:this.radio}let graphData = node.parentsetData(graphData, node.id, dataItem)}} } </script><style lang="scss" scoped> .condition {padding: 0px;height: 100%;border-radius: 5px;width: 80px;height: 40px;background-color: white;overflow: hidden;display: flex;flex-direction: row;justify-content: center;align-items: center; }.flex-row {display: flex;flex-direction: row;justify-content: center;align-items: center; }.l-flex {width: 35px;height: 100%;background-color: rgb(109, 162, 243);&:hover {background-color: rgb(129, 182, 255);} }.r-flex {width: 45px;height: 100%;background-color: rgb(154, 188, 247);&:hover {background-color: rgb(129, 182, 255);} }.nl-flex {background-color: rgb(41, 195, 193);&:hover {background-color: rgb(61, 215, 213);} }.nr-flex {background-color: rgb(102, 213, 233);&:hover {background-color: rgb(61, 215, 213);} }.label-text {color: white;font-size: 13px; }.m-view {position: absolute;right: 3px;bottom: 3px;width: 6px;height: 6px; }::v-deep {.el-form-item--small {margin: 0px;vertical-align: middle !important;}.el-button--small {padding-left: 10px;padding-right: 10px;}.el-input-group__append {padding-right: 15px;}.el-range__close-icon {display: none;}.el-checkbox--small {height: auto !important;}.el-radio {line-height: 1.5;}.el-radio__label {padding-left: 5px;} } </style><style lang="scss"> .pop-grid-view.el-popper {min-width: 90px; } </style>
![[Qt] 多元素控件 | 容器类控件 | 布局管理器layout](https://i-blog.csdnimg.cn/img_convert/59e5f6eb7d7b3306283dbff1115c2b62.png)