<使用element-ui table expand展开行实现手风琴效果
您的当前位置:首页正文

使用element-ui table expand展开行实现手风琴效果

2023-12-07 来源:六三科技网

问题讲解:

在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题,可以说饿了么团队在这个UI框架的文档撰写已经非常不错了,不过还是有一些方法乍一看让人摸不着头脑,有些table的常用功能示例代码提供的不是非常详细,所以这次针对这个可展开表格实现手风琴效果写一篇博客探讨一下。

先展示一下ElementUI官方提供的示例代码效果图

可以看到官方代码中在这边没有让这个可展开table自动折叠的功能,我点击了别的标签页后上次点击的行仍旧处在一个展开的状态,而且操控的方式也只能点击到左上角的小箭头才可以控制行的展开状态,体验不是特别好,可以说有点糟糕了,但是我后来在后面的文档中发现The methods 里面有写到一个方法叫toggleRowExpansion,这个方法应该是官方本意上想让我们来自由控制展开状态的,从传递的两个参数来看,一个是row(当前点击的行id),另一个是expended(行展开状态,boolean值),看上去有理有据,但是就是不知道怎么用,因为我始终无法获取到expended这个参数的值,有点气,所以这次我们用另一种方式来实现这个功能。

代码实现:

核心是 row-key、expand-row-keys属性

特别要注意的是row-key传入的是一个Function(row),而expand-row-keys传入的是一个数组,元素的值是要展开的row的key。

row-key这个属性是获取当前行号的,expand-row-keys这个属性是获取到展开的行号的,所以前者为一个单值,而后者是一个数组形式,所以这个属性也同样适用于表格多选列这种情况。

<el-table :data="compony" style="width: 100%;margin-top:80px" :row-key="getRowKeys" :expand-row-keys="expands" @current-change="toggleRowExpansion"> <el-table-column type="expand"> <template slot-scope="props"> <el-form label-position="left" inline class="demo-table-expand"> <el-form-item label="公司名称"> <span>{{ props.row.com_name }}</span> </el-form-item> <el-form-item label="下属电厂ID"> <span>{{ props.row.fct_id }}</span> </el-form-item> <el-form-item label="电厂名称"> <span>{{ props.row.fct_name }}</span> </el-form-item> <el-form-item label="用户名"> <span>{{ props.row.user_name }}</span> </el-form-item> <el-form-item label="密码"> <span>{{ props.row.password }}</span> </el-form-item> <el-form-item label="加入时间"> <span>{{ props.row.join_time | formatDate}}</span> </el-form-item> <el-form-item label="离开时间"> <span>{{ props.row.leave_time }}</span> </el-form-item> </el-form> </template> </el-table-column> <el-table-column label="公司 ID" prop="com_id"> </el-table-column> <el-table-column label="公司名称" prop="com_name"> </el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> </template> </el-table-column> </el-table>

这边因为要涉及到我项目最终实现的效果,所以我这里就直接把我的整个table都复制上来了,这边的重点主要是table的各个属性,也就是这个代码段的开头,我们在这里涉及到了一个新的监听事件@current-change="toggleRowExpansion",这个事件表示切换行的时候会有一个触发的事件发生,我们在获取了行id,展开行id之后,还要去data里面定义我们所要用到的数据框架。

 data() { return { compony:[], // 获取row的key值 getRowKeys(row) { return row.id; }, form: {}, // 要展开的行,数值的元素是row的key值 expands: [], } },

这边我就展示所需要用到的数据布置了,通过getRowKeys方法获取到row的行id值,定义一个expands展开行的数组,最后是业务逻辑代码

 data() { return { compony:[], // 获取row的key值 getRowKeys(row) { return row.id; }, form: {}, // 要展开的行,数值的元素是row的key值 expands: [], } },

因为我们现在只要求展开一行,所以每次把需要展开行的id储存进数组时要先清空一次数组,然后在push进去,最终实现效果图

小编还为您整理了以下内容,可能对您也有帮助:

Element-ui的Table表格展开行功能

业务需要表格能够展开某一行,但组件中只能展开所有行,或者用table的树形数据(row 中需包含 children字段),可以通过控制 row-class-name 来定义表格中需要展开的行。

Element-ui的Table表格展开行功能

业务需要表格能够展开某一行,但组件中只能展开所有行,或者用table的树形数据(row 中需包含 children字段),可以通过控制 row-class-name 来定义表格中需要展开的行。

vue element table expand 扩展行点击行展示且保证只展示一行

背景:因为element里面的扩展行支持多行展示扩展行,但接到了需求,只能展示一行,如:第一行扩展,点击第二行的时候,第一行收起,第二行展开。同时改成点击行展示扩展内容

<el-table

:data="eventTableData"

style="width: 100%"

@cell-click="clickTable"

ref="refTable"

@selection-change="handleSelectionChange"

@expand-change="expandSelect"

>

<el-table-column type="expand" width="0px" label="扩展">

</el-table-column>

</el-table>

data:{

eventTableData:[],

expands:[],

}

methods:{

clickTable:function(row, column, cell, event){//展开事件日志列表

if(cell.cellIndex!=3 && cell.cellIndex!=10){

this. refs.refTable.toggleRowExpansion(expandedRows[0]);

} else {

that.expands = [];

}

},

}

转 https://blog.csdn.net/fox_233/article/details/86529227

element-ui的树形控件的手风琴模式;代码怎么实现一级标题的左边图标可以...

这个是elementUI的树组件

你可以看下,至于二级不用,其实也是可以的。

element-ui的树形控件的手风琴模式;代码怎么实现一级标题的左边图标可以...

这个是elementUI的树组件

你可以看下,至于二级不用,其实也是可以的。

ElementUI Table横向滚动条遇到的问题汇总

1.横向滚动条且左侧列固定时,滚动条的可操作区域被遮挡,必须点击空白处才可实现拖动,更改样式解决:

/deep/#outputTable .el-table__fixed {

.el-table {

.el-table__fixed {

height:auto !important;

      bottom:17px !important;

    }

}

}

/deep/#outputTable .el-table__body-wrapper {

z-index:2;

}

2.设置固定列,样式错乱,解决方案:

设置max-height

ElementUI Table横向滚动条遇到的问题汇总

1.横向滚动条且左侧列固定时,滚动条的可操作区域被遮挡,必须点击空白处才可实现拖动,更改样式解决:

/deep/#outputTable .el-table__fixed {

.el-table {

.el-table__fixed {

height:auto !important;

      bottom:17px !important;

    }

}

}

/deep/#outputTable .el-table__body-wrapper {

z-index:2;

}

2.设置固定列,样式错乱,解决方案:

设置max-height

实现element-ui中table点击一行展开

toggleRowExpansion() // 参数1是单击行的row,参数2是true 或者false

实现element-ui中table点击一行展开

toggleRowExpansion() // 参数1是单击行的row,参数2是true 或者false

高分求jquery 手风琴效果实现代码

<style>
*,body,ul,li,a,h2{ margin:0; padding:0; list-style:none;}
body{font:12px "宋体"; padding-top:20px;}
#menu { width:211px; height:100%; float:left; margin-left:22px; margin-left:11px; margin-top:10px; margin-bottom:10px; _padding-bottom:10px; overflow:hidden;}
#menu a { cursor:pointer; width:211px; height:31px; float:left; padding-left:50px; background:url(../App_Themes/images/itemBg.jpg) no-repeat left top; color: #000000; cursor: pointer; font-weight:normal; font-size: 12px; line-height:31px; margin-top:2px; position:relative;}
#menu a:hover { cursor:pointer; width:211px; height:31px; float:left; padding-left:50px; background:url(../App_Themes/images/typeBg.jpg) no-repeat left top; color: #ffffff; cursor: pointer; font-weight:normal; font-size: 12px; line-height:31px; margin-top:2px; position:relative;}

#menu h2 { cursor:pointer; width:211px; height:31px; float:left; padding-left:50px; background:url(../App_Themes/images/type_sec.jpg) no-repeat left top; color: #db5901; cursor: pointer; font-weight:normal; font-size: 12px; line-height:31px; margin-top:2px; position:relative;}
#menu h2:hover { cursor:pointer; width:211px; height:31px; float:left; padding-left:50px; color: #333333; cursor: pointer; font-weight:normal; font-size: 12px; line-height:31px; margin-top:2px; position:relative;}

#menu a.navhov { cursor:pointer; width:211px; height:31px; float:left; padding-left:50px; background:url(../App_Themes/images/typeBg.jpg) no-repeat left top; color: #ffffff; cursor: pointer; font-weight:normal; font-size: 12px; line-height:31px; margin-top:2px; position:relative;}

.no { display:none;}
.type_prod_title{width:234px; height:26px; background-color:#4c4c4c; text-align:center; font-size:12px; color:White; line-height:26px; font-weight:normal; float:left; overflow:hidden;}
</style>
<div class="type_prod_con">
<div class="type_prod_title">
产品专区</div>
<div id="menu">
<a onclick="javascript:ShowMenu(this,'NO0')">实木地板系列</a>
<span id="NO0" class="no">
<h2 onclick="javascript:ShowMenu(this,'NO00')">
实木地板名称</h2>
<h2 onclick="javascript:ShowMenu(this,'NO01')">
实木地板名称</h2>
<h2 onclick="javascript:ShowMenu(this,'NO02')">
实木地板名称</h2>
<h2 onclick="javascript:ShowMenu(this,'NO03')">
实木地板名称</h2>
</span>
<a onclick="javascript:ShowMenu(this,'NO1')">实木门系列</a> <span id="NO1" class="no">
<h2 onclick="javascript:ShowMenu(this,'NO10')">
实木门名称</h2>
<h2 onclick="javascript:ShowMenu(this,'NO11')">
实木门名称</h2>
</span><a onclick="javascript:ShowMenu(this,'NO2')">板式家具系列</a> <span id="NO2" class="no">
<h2 onclick="javascript:ShowMenu(this,'NO20')">
*菜单C_1</h2>
<h2 onclick="javascript:ShowMenu(this,'NO21')">
*菜单C_2</h2>
</span><a onclick="javascript:ShowMenu(this,'NO3')">软床系列</a> <span id="NO3" class="no">
<h2 onclick="javascript:ShowMenu(this,'NO30')">
四级菜单D_1</h2>
<h2 onclick="javascript:ShowMenu(this,'NO31')">
四级菜单D_2</h2>
</span><a onclick="javascript:ShowMenu(this,'NO4')">沙发系列</a> <span id="Span1" class="no">
<h2 onclick="javascript:ShowMenu(this,'NO40')">
四级菜单D_1</h2>
<h2 onclick="javascript:ShowMenu(this,'NO41')">
四级菜单D_2</h2>
</span><a onclick="javascript:ShowMenu(this,'NO5')">饰品系列</a> <span id="Span2" class="no">
<h2 onclick="javascript:ShowMenu(this,'NO50')">
四级菜单D_1</h2>
<h2 onclick="javascript:ShowMenu(this,'NO351')">
四级菜单D_2</h2>
</span>
</div>
</div>

<script language="JavaScript">
<!--//
function ShowMenu(obj,noid){
var block = document.getElementById(noid);
var n = noid.substr(noid.length-1);
if(noid.length==4){
var ul = document.getElementById(noid.substring(0,3)).getElementsByTagName("ul");
var h2 = document.getElementById(noid.substring(0,3)).getElementsByTagName("h2");
for(var i=0; i<h2.length;i++){
//h2[i].innerHTML = h2[i].innerHTML.replace("+","-");
h2[i].style.color = "";
}
obj.style.color = "#db5901";
for(var i=0; i<ul.length; i++){if(i!=n){ul[i].className = "no";}}
}else{
var span = document.getElementById("menu").getElementsByTagName("span");
var h1 = document.getElementById("menu").getElementsByTagName("h1");
for(var i=0; i<h1.length;i++){
h2[i].innerHTML = h1[i].innerHTML.replace("+","-");
h2[i].style.color = "";
}

obj.style.color = "#ffffff";
for(var i=0; i<span.length; i++){if(i!=n){span[i].className = "no";}}
}
if(block.className == "no"){
block.className = "";
obj.innerHTML = obj.innerHTML.replace("-","+");
}else{
block.className = "no";
obj.style.color = "";

}
}
//-->
</script>

高分求jquery 手风琴效果实现代码

<style>
*,body,ul,li,a,h2{ margin:0; padding:0; list-style:none;}
body{font:12px "宋体"; padding-top:20px;}
#menu { width:211px; height:100%; float:left; margin-left:22px; margin-left:11px; margin-top:10px; margin-bottom:10px; _padding-bottom:10px; overflow:hidden;}
#menu a { cursor:pointer; width:211px; height:31px; float:left; padding-left:50px; background:url(../App_Themes/images/itemBg.jpg) no-repeat left top; color: #000000; cursor: pointer; font-weight:normal; font-size: 12px; line-height:31px; margin-top:2px; position:relative;}
#menu a:hover { cursor:pointer; width:211px; height:31px; float:left; padding-left:50px; background:url(../App_Themes/images/typeBg.jpg) no-repeat left top; color: #ffffff; cursor: pointer; font-weight:normal; font-size: 12px; line-height:31px; margin-top:2px; position:relative;}

#menu h2 { cursor:pointer; width:211px; height:31px; float:left; padding-left:50px; background:url(../App_Themes/images/type_sec.jpg) no-repeat left top; color: #db5901; cursor: pointer; font-weight:normal; font-size: 12px; line-height:31px; margin-top:2px; position:relative;}
#menu h2:hover { cursor:pointer; width:211px; height:31px; float:left; padding-left:50px; color: #333333; cursor: pointer; font-weight:normal; font-size: 12px; line-height:31px; margin-top:2px; position:relative;}

#menu a.navhov { cursor:pointer; width:211px; height:31px; float:left; padding-left:50px; background:url(../App_Themes/images/typeBg.jpg) no-repeat left top; color: #ffffff; cursor: pointer; font-weight:normal; font-size: 12px; line-height:31px; margin-top:2px; position:relative;}

.no { display:none;}
.type_prod_title{width:234px; height:26px; background-color:#4c4c4c; text-align:center; font-size:12px; color:White; line-height:26px; font-weight:normal; float:left; overflow:hidden;}
</style>
<div class="type_prod_con">
<div class="type_prod_title">
产品专区</div>
<div id="menu">
<a onclick="javascript:ShowMenu(this,'NO0')">实木地板系列</a>
<span id="NO0" class="no">
<h2 onclick="javascript:ShowMenu(this,'NO00')">
实木地板名称</h2>
<h2 onclick="javascript:ShowMenu(this,'NO01')">
实木地板名称</h2>
<h2 onclick="javascript:ShowMenu(this,'NO02')">
实木地板名称</h2>
<h2 onclick="javascript:ShowMenu(this,'NO03')">
实木地板名称</h2>
</span>
<a onclick="javascript:ShowMenu(this,'NO1')">实木门系列</a> <span id="NO1" class="no">
<h2 onclick="javascript:ShowMenu(this,'NO10')">
实木门名称</h2>
<h2 onclick="javascript:ShowMenu(this,'NO11')">
实木门名称</h2>
</span><a onclick="javascript:ShowMenu(this,'NO2')">板式家具系列</a> <span id="NO2" class="no">
<h2 onclick="javascript:ShowMenu(this,'NO20')">
*菜单C_1</h2>
<h2 onclick="javascript:ShowMenu(this,'NO21')">
*菜单C_2</h2>
</span><a onclick="javascript:ShowMenu(this,'NO3')">软床系列</a> <span id="NO3" class="no">
<h2 onclick="javascript:ShowMenu(this,'NO30')">
四级菜单D_1</h2>
<h2 onclick="javascript:ShowMenu(this,'NO31')">
四级菜单D_2</h2>
</span><a onclick="javascript:ShowMenu(this,'NO4')">沙发系列</a> <span id="Span1" class="no">
<h2 onclick="javascript:ShowMenu(this,'NO40')">
四级菜单D_1</h2>
<h2 onclick="javascript:ShowMenu(this,'NO41')">
四级菜单D_2</h2>
</span><a onclick="javascript:ShowMenu(this,'NO5')">饰品系列</a> <span id="Span2" class="no">
<h2 onclick="javascript:ShowMenu(this,'NO50')">
四级菜单D_1</h2>
<h2 onclick="javascript:ShowMenu(this,'NO351')">
四级菜单D_2</h2>
</span>
</div>
</div>

<script language="JavaScript">
<!--//
function ShowMenu(obj,noid){
var block = document.getElementById(noid);
var n = noid.substr(noid.length-1);
if(noid.length==4){
var ul = document.getElementById(noid.substring(0,3)).getElementsByTagName("ul");
var h2 = document.getElementById(noid.substring(0,3)).getElementsByTagName("h2");
for(var i=0; i<h2.length;i++){
//h2[i].innerHTML = h2[i].innerHTML.replace("+","-");
h2[i].style.color = "";
}
obj.style.color = "#db5901";
for(var i=0; i<ul.length; i++){if(i!=n){ul[i].className = "no";}}
}else{
var span = document.getElementById("menu").getElementsByTagName("span");
var h1 = document.getElementById("menu").getElementsByTagName("h1");
for(var i=0; i<h1.length;i++){
h2[i].innerHTML = h1[i].innerHTML.replace("+","-");
h2[i].style.color = "";
}

obj.style.color = "#ffffff";
for(var i=0; i<span.length; i++){if(i!=n){span[i].className = "no";}}
}
if(block.className == "no"){
block.className = "";
obj.innerHTML = obj.innerHTML.replace("-","+");
}else{
block.className = "no";
obj.style.color = "";

}
}
//-->
</script>

elementui表格宽度超出滚动

你想问的是elementui表格宽度超出滚动要怎么操作?操作步骤如下:
1、在“el-table”标签上添加 “style”属性,设置表格宽度和滚动条样式。
2、给表格的每一列设置“width”属性,表示该列的宽度。如果表格中有一列的宽度不指定,则该列的宽度会自适应剩余空白区域,可能会造成表格宽度超出的情况。
3、如果表格中的内容较多,需要分页显示,则需要给表格添加“pagination”属性,并指定相应的参数。
4、通过上述操作,可以设置elementui表格的宽度超出时出现滚动条的效果,并且实现分页显示功能。

elementui表格宽度超出滚动

你想问的是elementui表格宽度超出滚动要怎么操作?操作步骤如下:
1、在“el-table”标签上添加 “style”属性,设置表格宽度和滚动条样式。
2、给表格的每一列设置“width”属性,表示该列的宽度。如果表格中有一列的宽度不指定,则该列的宽度会自适应剩余空白区域,可能会造成表格宽度超出的情况。
3、如果表格中的内容较多,需要分页显示,则需要给表格添加“pagination”属性,并指定相应的参数。
4、通过上述操作,可以设置elementui表格的宽度超出时出现滚动条的效果,并且实现分页显示功能。

element-ui展示

展示了 element-ui 的相应组件的功能及UI,以便快速浏览查询。

transition 。内置了几种过渡动画。

el-row el-col 。通过基础的 24 分栏,迅速简便地创建布局。

el-container 。用于布局的容器组件,方便快速搭建页面的基本结构。

i 。提供了一套常用的图标集合。

el-button 。常用的操作按钮。

el-link 。文字超链接。

el-radio 。在一组备选项中进行单选。

el-checkbox 。一组备选项中进行多选。

el-input 。通过鼠标或键盘输入字符。

el-input-number 。仅允许输入标准的数字值,可定义范围。

el-select 。当选项过多时,使用下拉菜单展示并选择内容。

el-cascader 。当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。

el-switch 。表示两种相互对立的状态间的切换,多用于触发「开/关」。

el-slider 。通过拖动滑块在一个固定区间内进行选择。

el-time-picker 。用于选择或输入日期。

el-date-picker 。用于选择或输入日期。

el-upload 。通过点击或者拖拽上传文件。

el-rate 。评分组件。

el-color-picker 。用于颜色选择,支持多种格式。

el-transfer 。用于多次选择,统一确定的组件。

el-form .由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据.

el-table 。用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。

el-tag 。用于标记和选择。

el-progress 。用于展示操作进度,告知用户当前状态和预期。

el-tree 。用清晰的层级结构展示信息,可展开或折叠。

el-pagination 。当数据量过多时,使用分页分解数据。

el-badge 。出现在按钮、图标旁的数字或状态标记。

el-avatar 。用图标、图片或者字符的形式展示用户或事物信息。

el-alert 。用于页面中展示重要的提示信息。

$loading 。加载数据时显示动效。

$notify 。悬浮出现在页面角落,显示全局的通知提醒消息。

$message 。常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。

$msgbox 。模拟系统的消息提示框而实现的一套模态对话框组件,用于消息提示、确认消息和提交内容。

el-menu 。为网站提供导航功能的菜单。

el-tabs 。分隔内容上有关联但属于不同类别的数据集合。

el-breadcrumb 。显示当前页面的路径,快速返回之前的任意页面。

el-page-header 。如果页面的路径比较简单,推荐使用页头组件而非面包屑组件。

el-dropdown 。将动作或菜单折叠到下拉菜单中。

el-steps 。引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。

el-dialog 。在保留当前页面状态的情况下,告知用户并承载相关操作。

el-tooltip 。常用于展示鼠标 hover 时的提示信息。

el-popover 。Popover与Tooltip很类似,相当于能自定义的Tooltip。

el-popconfirm 。点击元素,弹出气泡确认框。相当于一个已自定义的Popover。

el-card 。将信息聚合在卡片容器中展示。

el-carousel 。在有限空间内,循环播放同一类型的图片、文字等内容。

el-collapse 。通过折叠面板收纳内容区域。

el-timeline 。可视化地呈现时间流信息。

el-divider 。区隔内容的分割线。

el-calendar 。显示日期。

el-image 。图片容器,在保留原生img的特性下,支持懒加载,自定义占位、加载失败等。

el-backtop 。返回页面顶部的操作按钮。

ul 。滚动至底部时,加载更多数据。

el-drawer 。有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验。

element-ui展示

展示了 element-ui 的相应组件的功能及UI,以便快速浏览查询。

transition 。内置了几种过渡动画。

el-row el-col 。通过基础的 24 分栏,迅速简便地创建布局。

el-container 。用于布局的容器组件,方便快速搭建页面的基本结构。

i 。提供了一套常用的图标集合。

el-button 。常用的操作按钮。

el-link 。文字超链接。

el-radio 。在一组备选项中进行单选。

el-checkbox 。一组备选项中进行多选。

el-input 。通过鼠标或键盘输入字符。

el-input-number 。仅允许输入标准的数字值,可定义范围。

el-select 。当选项过多时,使用下拉菜单展示并选择内容。

el-cascader 。当一个数据集合有清晰的层级结构时,可通过级联选择器逐级查看并选择。

el-switch 。表示两种相互对立的状态间的切换,多用于触发「开/关」。

el-slider 。通过拖动滑块在一个固定区间内进行选择。

el-time-picker 。用于选择或输入日期。

el-date-picker 。用于选择或输入日期。

el-upload 。通过点击或者拖拽上传文件。

el-rate 。评分组件。

el-color-picker 。用于颜色选择,支持多种格式。

el-transfer 。用于多次选择,统一确定的组件。

el-form .由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据.

el-table 。用于展示多条结构类似的数据,可对数据进行排序、筛选、对比或其他自定义操作。

el-tag 。用于标记和选择。

el-progress 。用于展示操作进度,告知用户当前状态和预期。

el-tree 。用清晰的层级结构展示信息,可展开或折叠。

el-pagination 。当数据量过多时,使用分页分解数据。

el-badge 。出现在按钮、图标旁的数字或状态标记。

el-avatar 。用图标、图片或者字符的形式展示用户或事物信息。

el-alert 。用于页面中展示重要的提示信息。

$loading 。加载数据时显示动效。

$notify 。悬浮出现在页面角落,显示全局的通知提醒消息。

$message 。常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。

$msgbox 。模拟系统的消息提示框而实现的一套模态对话框组件,用于消息提示、确认消息和提交内容。

el-menu 。为网站提供导航功能的菜单。

el-tabs 。分隔内容上有关联但属于不同类别的数据集合。

el-breadcrumb 。显示当前页面的路径,快速返回之前的任意页面。

el-page-header 。如果页面的路径比较简单,推荐使用页头组件而非面包屑组件。

el-dropdown 。将动作或菜单折叠到下拉菜单中。

el-steps 。引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。

el-dialog 。在保留当前页面状态的情况下,告知用户并承载相关操作。

el-tooltip 。常用于展示鼠标 hover 时的提示信息。

el-popover 。Popover与Tooltip很类似,相当于能自定义的Tooltip。

el-popconfirm 。点击元素,弹出气泡确认框。相当于一个已自定义的Popover。

el-card 。将信息聚合在卡片容器中展示。

el-carousel 。在有限空间内,循环播放同一类型的图片、文字等内容。

el-collapse 。通过折叠面板收纳内容区域。

el-timeline 。可视化地呈现时间流信息。

el-divider 。区隔内容的分割线。

el-calendar 。显示日期。

el-image 。图片容器,在保留原生img的特性下,支持懒加载,自定义占位、加载失败等。

el-backtop 。返回页面顶部的操作按钮。

ul 。滚动至底部时,加载更多数据。

el-drawer 。有些时候, Dialog 组件并不满足我们的需求, 比如你的表单很长, 亦或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的 API, 在 UI 上带来不一样的体验。

elementUI自定义table多选

首先看下我的效果图

需求

当选择某一行的时候要选择当前行,并且将当前行的用户数据显示在头部;如果已经选中,则取消选中效果同时删除头部对应的用户图像,当切换分页时如果头部已经有选中,则勾选对应的行,当编辑时,也要进行回显

原因

elementUI的table组件提供的toggleRowSelection方法不生效

实现

    a-首先放弃使用组件内置提供的seletion选项,使用插槽自定义

    b-当获取数据后,向自定义的选择框添加绑定事件

        (使用jquery是因为原生的removeEventListener无法成功解绑事件,这会导致事件重复执行多次而渲染错误;当为激活状态时                                    使用active作为标记)

c-筛选el-table点击事件,使其只在点击选择框时触发,同时向头像框数据push或者delete

    (经过调试,当column.label不存在时,即表示点击多选框;actorsImgs就是用于显示图像的数据容器;activeRow则是内部记录的每一页的激活项)

d-当用户点击某个图像时,删除图像同时让对应多选框恢复为默认状态

e-当用户分页时,记录当前激活的page,并在相等时激活当前页的已选中项

    f-当为编辑时,首先需要获取当前行关联的用户;由于无法记录用户在那页有选中数据,因此需要手动计算

    (xb即计算出的当前页选中的变量)

至此,该功能实现完毕。(ps,如果有相同需求的小伙伴,能够使用el-table提供的方法,麻烦留个言。因为本人尝试了多次无效)

2021-1-30更新,本文章只提供实现思路,因为在交付测试过程中仍然有bug,但由于本人偏懒就不重新整理了

element-ui中el-table多层数组渲染问题

如果你想要渲染的表格数据对象里面还有一层数组,类似下面这样的多层数据,该如何做呢?

实现方法如下:

效果图如下:

六三科技网还为您提供以下相关内容希望对您有帮助:

Antd table的expandedRowRender额外展开行以及注意事项

用的是expandedRowRender这个属性,值另外传一个子table组件进去就行 有个需求是加号的时候,页面上只允许有一个展开,即点击第一个加号展开后,再点击第二个加号,第一个要收缩回来,第二个子表格展开,antd默认的是,都...

element-ui的树形控件的手风琴模式;代码怎么实现一级标题的左边图标可以...

这个是elementUI的树组件 你可以看下,至于二级不用,其实也是可以的。

高分求jquery 手风琴效果实现代码

if(noid.length==4){ var ul = document.getElementById(noid.substring(0,3)).getElementsByTagName("ul");var h2 = document.getElementById(noid.substring(0,3)).getElementsByTagName("h2");for(var i=0; i...

vue element table expand 扩展行点击行展示且保证只展示一行

背景:因为element里面的扩展行支持多行展示扩展行,但接到了需求,只能展示一行,如:第一行扩展,点击第二行的时候,第一行收起,第二行展开。同时改成点击行展示扩展内容 &lt;el-table :data="eventTableData"style="width...

element-ui el-tree手动展开/折叠全部节点

方法一:方法二:

element-ui展示

展示了 element-ui 的相应组件的功能及UI,以便快速浏览查询。transition 。内置了几种过渡动画。el-row el-col 。通过基础的 24 分栏,迅速简便地创建布局。el-container 。用于布局的容器组件,方便快速搭建页面的基本结构...

elementui表格宽度超出滚动

可能会造成表格宽度超出的情况。3、如果表格中的内容较多,需要分页显示,则需要给表格添加“pagination”属性,并指定相应的参数。4、通过上述操作,可以设置elementui表格的宽度超出时出现滚动条的效果,并且实现分页显示功能。

ElementUI Table横向滚动条遇到的问题汇总

1.横向滚动条且左侧列固定时,滚动条的可操作区域被遮挡,必须点击空白处才可实现拖动,更改样式解决:/deep/#outputTable .el-table__fixed { .el-table { .el-table__fixed { height:auto !important;  ...

elementui表格没数据时默认10条

elementui表格没数据时默认10条是因为:看一下表格需要的数据,0-9条的数据都自动有一个名为LAY_TABLE_INDEX的键值对,但10条及之后的数据都没有这个键值对。

Elementui 在线获取表格数据

&lt;link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"&gt; &lt;link rel="stylesheet" href=""&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="app"&gt; &lt;el-table ref="testTable" :data="tableData" style="wid...

本文如未解决您的问题请添加抖音号:51dongshi(抖音搜索懂视),直接咨询即可。

Top