element 问题整合

news2024/12/25 1:16:19

没关系,凡事发生必有利于我

文章目录

  • 一、el-table 同级数据对齐及展开图标的位置问题
  • 二、el-table 勾选框为圆角及只能勾选一个


一、el-table 同级数据对齐及展开图标的位置问题


element 官方提供的扩展tree型数据在表格里默认是靠左边对齐,项目需求需要同级数据要对齐,且扩展列应该在第三列部门名称上

默认样式
在这里插入图片描述
我的需求

在这里插入图片描述
1、数据同级问题
在这里插入图片描述

// .sysDictInfoTable .el-table__row:not([class*="el-table__row--level-"]):
// 这是一个选择器,表示选择类名为sysDictInfoTable的元素下的.el-table__row元素,
// 但不包括那些类名包含el-table__row--level- 的元素。
// td:nth-child(3):表示选择.el-table__row元素下的第三个td子元素。
// padding-left: 24px !important;:设置td:nth-child(3)元素的左内边距为24像素,
// 并使用!important提高优先级,使这个样式规则优先于其他可能影响该元素的样式规则。

// 对齐不含子目录的所有一级目录
.sysDictInfoTable .el-table__row:not([class*="el-table__row--level-"]) {
	td:nth-child(3) {
		padding-left: 23px !important;
	}
}

// 子项目扩展的样式
.sysDictInfoTable  .el-table__placeholder {
	margin-left: 3px;
}

2、指定扩展图标的位置
在这里插入图片描述

二、el-table 勾选框为圆角及只能勾选一个

1、勾选框为圆角

 // 通过控制台可以看到多选框的class名为el-checkbox__inner
 
	span.el-checkbox__inner {
		border-radius: 50% !important;
	}

2、只能勾选一条数据
在这里插入图片描述

  handleSelect(selection) {
                //只能选择一行,选择其他,清除上一行
               if (selection.length > 1) {
                   let del_row = selection.shift()
                   //设置这一行取消选中
                   this.$refs.tableData.toggleRowSelection(del_row, false)   
               }
  },

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

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

相关文章

Python在Excel中设置数字格式和获取应用数字格式后的值

目录 安装Python Excel库 Python在Excel中设置数字格式 Python获取Excel中应用数字格式的单元格的显示值 总结 Excel 数字格式是用于控制单元格中数字显示方式的一组规则或代码。通过设置不同的数字格式,可以定义数字的显示方式,如小数位数、货币符号…

智能护栏碰撞监测系统:强化道路安全的智能守卫

智能护栏碰撞监测系统是提升道路安全、加强交通管理智能化的重要技术手段,其为道路安全带来的好处和安装的必要性体现在以下几个方面: 1. 即时事故响应:系统能够实时监测到护栏遭受的碰撞事件,几乎瞬间触发报警机制,将…

ViewBinding的使用(因为kotlin-android-extensions插件的淘汰)

书籍: 《第一行代码 Android》第三版 开发环境: Android Studio Jellyfish | 2023.3.1 问题: 3.2.4在Activity中使用Toast章节中使用到了kotlin-android-extensions插件,但是该插件已经淘汰,根据网上了解,目前使用了新的技术VewBinding替…

电脑的D盘E盘F盘突然消失了 电脑只剩下C盘了其他盘怎么恢复

现如今随着时代的发展,无纸化办公成为主流,这主要归功于电脑,能够通过电脑完成的工作绝不使用纸质文件,这不仅提高了工作效率,也让一些繁杂的工作变的更加简单。不过电脑毕竟是电子产品,不可避免的会出现一…

2024软件设计师笔记之考点版(一考就过):11-25

软件设计师之一考就过:成绩版 考点11:防火墙、入侵检测 真题1:(专家系统、模型检测、简单匹配)属于入侵检测;而漏洞扫描不属于。 真题2:防火墙特性包括(控制进出网络的数据包和数据流向、提供流量信息的日志和审计、隐藏内部IP以及网络结构细节),但不包括提供漏洞扫…

视频共享融合赋能平台LntonCVS统一视频接入平台数字化升级医疗体系

医疗健康事关国计民生,然而,当前我国医疗水平的地区发展不平衡、医疗资源分布不均和医疗信息系统老化等问题,制约了整体服务能力和水平的提升。视频融合云平台作为推动数字医疗的关键工具,在医疗领域的广泛应用和普及,…

[极客大挑战 2020]Roamphp2-Myblog

又来喽 经过一番测试&#xff0c;发现文件包含&#xff0c;使用伪协议读取文件 例&#xff1a;php://filter/readconvert.base64-encode/resourcelogin //这里我只写php部分 //login.php <?php require_once("secret.php"); mt_srand($secret_seed); $_SESSION…

visual studio,默认生成C#代码.cs,设置成生成C++代码.cpp解决方案视图调整

安装 在创建项目选择 解决方案视图调整,点着解决方案视图,然后往中间移动出现这个类似方向的放哪就是哪

OpenCV练习(2)图像校正

1、傅里叶变换 霍夫变换 直线 角度 旋转2、边缘检测 霍夫变换 直线角度 旋转3、四点透视 角度 旋转4、检测矩形轮廓 角度 旋转 1.目的 实现类似全能扫面王的图像校正功能 2. 基于轮廓提取和透射变换 基于轮廓提取和透射变换的矫正算法更适用于车牌、身份证、人民…

【十六】【QT开发应用】Menu菜单,contextMenuEvent,setContextMenuPolicy,addAction

在 Qt 框架中&#xff0c;QMenu 类用于创建和管理菜单。菜单是用户界面的一部分&#xff0c;可以包含多个选项或动作&#xff0c;用户可以选择这些选项来执行特定的功能。菜单通常显示在菜单栏、上下文菜单&#xff08;右键菜单&#xff09;或工具栏中。 基本用法 创建菜单对象…

Percona Toolkit 神器全攻略(配置类)

Percona Toolkit 神器全攻略&#xff08;配置类&#xff09; Percona Toolkit 神器全攻略系列共八篇&#xff0c;前文回顾&#xff1a; 前文回顾Percona Toolkit 神器全攻略Percona Toolkit 神器全攻略&#xff08;实用类&#xff09; 全文约定&#xff1a;$为命令提示符、gr…

变长的时间戳设计,第2版

以前的时间戳有32位&#xff0c;以秒为单位&#xff0c;231秒≈68年&#xff0c;从1970年开始&#xff0c;到2038年会出问题。 现在的时间戳有64位&#xff0c;表达范围仍然受限。 设计变长的时间戳&#xff0c;以32位为单元&#xff0c;最短有32位&#xff0c;最长有328256位…

UI(二)控件

文章目录 PatternLockProgressQRCodeRadioRatingRichTextScollBarSearchSelectSlideSpanStepper和StepperItemTextTextAreaTextClockTextInputTextPickerTextTimerTimePickerToggleWeb PatternLock PatternLock是图案密码锁组件&#xff0c;以九宫格图案的方式输入密码&#x…

vscode php dubug xdubg

前提&#xff1a;官网安装了PHP 一、检测是否有xdebug插件 二、如果没有插件&#xff0c;下载对应版本的插件&#xff0c;并且配置php 1、查看自己php版本&#xff1a; 2、xdebug下载地址&#xff1a; https://xdebug.org/download/historical 我下载的是箭头所示&#xff0…

【SHAP解释运用】基于python的树模型特征选择+随机森林回归预测+SHAP解释预测

1.导入必要的库 import pandas as pd import numpy as np import matplotlib.pyplot as plt import seaborn as sns from sklearn.model_selection import train_test_split from sklearn.ensemble import RandomForestRegressor from sklearn.tree import export…

对input输入框脱敏的实现(input输入时可回删、可粘贴)

目录 1.要解决的问题2.第一回合&#xff1a;substring replace3.第二回合&#xff1a;移魂大法4.第三回合&#xff1a;移花接木5.第四回合&#xff1a;万佛归宗 写在前面&#xff1a; 如有转载&#xff0c;务必注明出处&#xff0c;否则后果自负。 1.要解决的问题 继续与客户…

从云原生视角看 AI 原生应用架构的实践

本文核心观点&#xff1a; 基于大模型的 AI 原生应用将越来越多&#xff0c;容器和微服务为代表的云原生技术将加速渗透传统业务。API 是 AI 原生应用的一等公民&#xff0c;并引入了更多流量&#xff0c;催生企业新的生命力和想象空间。AI 原生应用对网关的需求超越了传统的路…

云计算运维工程师的突发状况处理

云计算运维工程师在应对突发的故障和紧急情况时,需要采取一系列迅速而有效的措施来最小化服务中断的时间并恢复系统的稳定性。 以下是一些关键步骤和策略: 快速响应: 立即识别并确认故障的性质和范围。通知团队成员和相关的利益相关者,确保所有人了解当前情况。故障诊断:…

Web Worker 学习及使用

了解什么是 Web Worker 提供了可以在后台线程中运行 js 的方法。可以不占用主线程&#xff0c;不干扰用户界面&#xff0c;可以用来执行复杂、耗时的任务。 在worker中运行的是另一个全局上下文&#xff0c;不能直接获取 Window 全局对象。不同的 worker 可以分为专用和共享&…

使用 Vue Router 的 meta 属性实现多种功能

在 Vue.js 中&#xff0c;Vue Router 提供了强大的路由管理功能。通过 meta 属性&#xff0c;我们可以在路由定义中添加自定义元数据&#xff0c;以实现访问控制、页面标题设置、角色权限管理、页面过渡效果等多种功能。本文将总结如何使用 meta 属性来实现这些常见的功能。 1.…