element 问题整合

admin2024-07-01  7

文章目录

  • 一、el-table 同级数据对齐及展开图标的位置问题
  • 二、el-table 勾选框为圆角及只能勾选一个
  • 三、el-tree 弹框打开,使得列表关闭,且弹框滚动条回到顶部

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


默认样式
element 问题整合,在这里插入图片描述,第1张
我的需求

element 问题整合,在这里插入图片描述,第2张
1、数据同级问题
element 问题整合,在这里插入图片描述,第3张

// .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、指定扩展图标的位置
element 问题整合,在这里插入图片描述,第4张

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

1、勾选框为圆角

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

2、只能勾选一条数据
element 问题整合,在这里插入图片描述,第5张

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

三、el-tree 弹框打开,使得列表关闭,且弹框滚动条回到顶部

element 问题整合,在这里插入图片描述,第6张

element 问题整合,在这里插入图片描述,第7张

element 问题整合,在这里插入图片描述,第8张

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明原文出处。如若内容造成侵权/违法违规/事实不符,请联系SD编程学习网:675289112@qq.com进行投诉反馈,一经查实,立即删除!