vue改造四级树状可输入table

vue改造四级树状可输入table
在这里插入图片描述

<template><div class="dimension_wary"><div class="itemHeader"><div class="target"></div><div class="sort">X2</div><div class="weight">X3</div><div class="rule">X4</div></div><el-tree :data="tableDatas":props="defaultProps":default-expand-all="true":expand-on-click-node="false"empty-text="暂无数据"icon-class="tree_icon":indent="0"><div slot-scope="{ node, data }" style="width: 100%"><div class="thirdContentContainer"><div class="target" :style="{paddingLeft: ((data.indexType - 1) * 16) + 'px'}"><span class="tree_label" ><span @click="handleIconTree(node)" style="padding: 4px 0 0 2px;"><d2-icon-svg v-if="data.selfAssessIndexVOList && data.selfAssessIndexVOList.length != 0" :name="node.expanded ? 'icon_gather' : 'icon_expend'" class="tree_svg" /></span>{{ data.riskType }}</span> <span class="target_text"><el-tooltip effect="dark" v-if="drawerType =='view' || !dataUpper" :content="data.indexName" :visible-arrow="false" placement="top-start"><el-input ref="indexName" size="medium" :disabled="true" v-model="data.indexName" clearable :style="inputWidth(data.indexType * 16)" /></el-tooltip><el-input v-else placeholder="请输入" ref="indexName" size="medium" :disabled="drawerType =='view' || !dataUpper" v-model="data.indexName" v-limitTextLen="512" clearable :style="inputWidth(data.indexType * 16)" /></span></div><div class="sort"><el-select v-show="data.indexType && data.indexType == '4'" :disabled="drawerType =='view' || !dataUpper" v-model="data.indexClassify" filterable placeholder="请选择" style="width:95%;"><el-optionv-for="item in dictsAll.indexClassify":key="item.key":label="item.value":value="item.key"></el-option></el-select></div><div class="weight"><el-input placeholder="请输入" size="medium" :disabled="drawerType =='view' || !dataUpper" oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,2})%?).*$/g, '$1')" v-model="data.indexWeight" class="weight_input" clearable style="width: 90%;" /></div><div class="rule"><div class="rule_text" :class="data.indexType == '4' ? 'rule_textTow' : 'rule_textOne'" style="width: 97%;"><div v-show="data.indexType && data.indexType == '4'" style="width: 93%;"><el-tooltip effect="dark" v-if="drawerType =='view' || !dataUpper" :content="data.indexStandard" :visible-arrow="false" placement="top-start"><el-input :disabled="true" placeholder="请输入" size="medium" v-model="data.indexStandard" clearable style="width: 93%;" /></el-tooltip><el-input v-else :disabled="drawerType =='view' || !dataUpper" placeholder="请输入" size="medium" v-limitTextLen="512" v-model="data.indexStandard" clearable style="width: 93%;" /></div><el-popover v-if="drawerType !='view'" placement="bottom-end" width="80" popper-class='popperClass' trigger="hover"><div class="popover" v-show="dataUpper"><div class="popover_div" @click="handleSam(data, node)">添加同级</div><div class="popover_div" @click="handleSubordinate(data, node)" v-if="data.indexType != 4">添加下级</div><div class="popover_div" @click="handleDelect(data, node)">删除本级</div></div><el-button slot="reference" type="text" size="suspension"><d2-icon-svg name="icon_increase" class="icon_name_svg" style="margin-right: 0px;" /></el-button></el-popover></div></div></div></div></el-tree></div>
</template>
//script
handleIconTree(valOne) {if (valOne.expanded == true) {valOne.expanded = false} else {valOne.expanded = true}},inputWidth(val) {let w = '90%'let k = val +'px'if (val == 64) {k = '40px'}return {width: `calc(${w} - ${k})`}},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/22641.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

人眼是如何选择成像的

其实&#xff0c;我在前面的一篇文章中利用数学模型&#xff0c;没有具体计算过&#xff0c;讨论了该如何成像&#xff0c;但是这毕竟只是数学上的计算方式&#xff0c;跟人脑的处理方式不是一样的。我现在提出一个跟比较接近哲学的问题&#xff0c;首先人脑在不清楚什么清晰&a…

基于最大重叠离散小波变换的PPG信号降噪(MATLAB 2018)

光电容积脉搏波PPG信号结合相关算法可以用于人体生理参数检测&#xff0c;如血压、血氧饱和度等&#xff0c;但采集过程中极易受到噪声干扰&#xff0c;对于血压、血氧饱和度测量的准确性造成影响。随着当今社会医疗保健技术的发展&#xff0c;可穿戴监测设备对于PPG信号的质量…

卷积学习笔记

上下采样&#xff1a; 上采样&#xff08;Upsampling&#xff09;和下采样&#xff08;Downsampling&#xff09;是图像处理和信号处理中常用的两种技术&#xff0c;它们分别用于增加或减少数据的分辨率或采样率。 下采样&#xff08;Downsampling&#xff09; 定义&#xf…

【Kubernetes】k8s集群的污点、容忍、驱逐 以及排障思路

污点和容忍以及驱逐 一、污点&#xff08;Taint&#xff09; 污点介绍 节点亲和性&#xff0c;是Pod的一种属性&#xff08;偏好或硬性要求&#xff09;&#xff0c;它使Pod被吸引到一类特定的节点。Taint 则相反&#xff0c;它使节点能够排斥一类特定的 Pod。 Taint 和 Tol…

Word忘记保存?请使用Word隐藏备份文件

大家用Word写材料时&#xff0c;如果忘记保存&#xff0c;可以使用Word隐藏备份文件找回未保存的文件。&#xff08;仅供参考&#xff09; Windows7、8、10、11系统的设置如下&#xff1a; 执行上述操作&#xff0c;可以在word文件菜单中信息项的自动保存中找到了。上述内容…

Java中的接口与抽象类:区别与联系

Java中的接口与抽象类&#xff1a;区别与联系 在Java中&#xff0c;interface&#xff08;接口&#xff09;和abstract class&#xff08;抽象类&#xff09;是两种重要的抽象类型&#xff0c;用于定义对象的抽象行为和结构。虽然Java 8之后接口引入了默认方法和静态方法&…

Mac保姆级配置jdk环境

1.找到下载的jdk环境 通常是这个。留作备用 /Library/Java/JavaVirtualMachines/jdk1.8.0_291.jdk/Contents/Home/bin 然后新开一个终端下执行以下命令 sudo vim ~/.bash_profile 进入编辑模式后 按 i 开始添加内容结束编辑模式按 ESC结束后保存输入 :wq!不保存输入 :q! 注意…

索引函数失效场景如何配置避免失效

1、全表扫描&#xff1a; 1、场景&#xff1a; 当查询条件没有使用索引&#xff0c;或者索引没有被正确使用时&#xff0c;数据库可能会进行全表扫描&#xff0c;导致索引失效。 2、避免方法&#xff1a; &#xff08;1&#xff09;确保查询条件中的字段已经被索引。 &…

理解NSCopying协议

NSCopying 协议用于让对象能够被复制。实现这个协议的类需要定义如何创建该对象的副本。这个副本是独立的&#xff0c;不会与原对象共享内存地址。 为什么需要 NSCopying 协议&#xff1f; 当你需要复制对象时&#xff0c;例如将对象存储到一个集合&#xff08;如数组、字典&…

使用若依框架RuoYi前后端分离版+运行+自动生成页面进行导入进行开发+工具(完整版)

若依后台预览 摘要: 随着前后端分离开发模式的流行,越来越多的开发者开始将项目的前端和后端分离开发,以提高开发效率和项目的灵活性。若依框架作为一款优秀的开源后台管理系统,提供了强大的权限管理和代码生成功能,非常适合前后端分离开发。 一、若依框架介绍 若依框架…

C++中的deque详解

1. 引言 在C标准模板库(STL)中&#xff0c;deque&#xff08;双端队列&#xff09;是一个非常重要的容器&#xff0c;它支持在序列的两端进行快速插入和删除操作。与vector不同&#xff0c;deque不需要在内存中连续存储元素&#xff0c;因此它对于需要在序列中间进行大量插入和…

06.docker容器管理

docker的容器管理 创建并且启动一个nginx容器 docker run -d -p 80:80 nginx:latest run&#xff08;创建并运行一个容器&#xff09; -d 放在后台 -p 端口映射 -v 源地址(宿主机):目标地址(容器)创建一个centos系统的容器&#xff0c;并且进入到系统里面 nginx docker镜…

C++大型项目管理:通用CMake框架的架构奥秘

往期本博主的 C 精讲优质博文可通过这篇导航进行查找&#xff1a; Lemo 的C精华博文导航&#xff1a;进阶、精讲、设计模式文章全收录 前言 在当今的软件开发环境中&#xff0c;随着 C 项目的不断扩大和变得越来越复杂&#xff0c;有效地管理这些项目成为了一个重要的挑战。 C…

【WEB前端2024】3D智体编程:乔布斯3D纪念馆-第35课-3D互动教材

【WEB前端2024】3D智体编程&#xff1a;乔布斯3D纪念馆-第35课-3D互动教材 使用dtns.network德塔世界&#xff08;开源的智体世界引擎&#xff09;&#xff0c;策划和设计《乔布斯超大型的开源3D纪念馆》的系列教程。dtns.network是一款主要由JavaScript编写的智体世界引擎&am…

Zero Infinity原理

如上图&#xff0c;一次加载一个layer的一个weights分片&#xff08;一层的1/DP的参数量&#xff09;&#xff0c;Broadcast至所有rank&#xff0c;计算各自的梯度&#xff0c;再Reduce至其中一个负责的rank&#xff0c;offload存放至CPU Memory&#xff0c;释放GPU里的weights…

i.MX8MP平台开发分享(TMU驱动及用户接口篇)

概念 thermal zone 温度控制区域。sensor 获取温度。trip points 温度跳变点&#xff0c;或者是温度阈值。cooling device Thermal Cooling Device 是可以降温设备的抽象&#xff0c;能降温的设备比如风扇&#xff0c;这些好理解&#xff0c;但是像CPU、GPU 这些 Cooling devi…

探究Spring中的Controller:单例、多例及其并发安全性

1. Spring框架的简介 Spring是一个开源的Java平台&#xff0c;用来简化企业级应用程序的开发。Spring框架提供了一整套统一的编程模型&#xff0c;使得开发人员能够更加专注于业务逻辑&#xff0c;而不必去处理复杂的技术细节。Spring包含多个模块&#xff0c;其中最常使用的就…

cesium Material的理解与使用

1.简介 材质Material可以是比较简单的&#xff0c;比如直接将一张图片赋予表面&#xff0c;或者使用条纹状、棋盘状的图案&#xff1b;也可以使用Fabric和GLSL&#xff0c;重新创建一个新的材质或者组合现有的材质。例如&#xff0c;我们可以通过程序生成的纹理(procedural bri…

el-input实现后缀图标和clearable的兼容,调整el-input clearable与自定义图标展示位置问题

背景&#xff1a;常见的输入框存在两个图标的展示效果都是清空在前搜索或其他图标在后 常见以及最终实现效果&#xff08;清空图标在前&#xff0c;搜索图标在后&#xff09; BUG以及el-input默认效果 问题排查 通过控制台审查元素能够发现&#xff0c;默认的效果是自定义图标…

pyautogui模拟鼠标拖动选中文字的基本知识(附Demo)

目录 前言1. Demo1.1 特定窗口点击拖动1.2 屏幕中间点击拖动 2. 基本知识 前言 相关知识推荐阅读&#xff1a; 详细分析Python中的Pyautogui库&#xff08;附Demo&#xff09;详细分析PyAutoGUI中的locate函数&#xff08;附Demo&#xff09; 1. Demo 先给出一部分代码展示…