1.header-cell-style使用方法header-cell-style方法是改变表格头部样式的内置属性,可以配置表头的样式:header-cell-style="{background:'#f3f6fd',color:'#555'}"2.表格的type="selection"的使用方法,将表头中的全选框取消el-table-columntype="selection">/el-table-column>当el-table增加改属性后会增加全选功能,需求是将表头中的全选框取消,下面的css代码需要放在App.vue中。在组件的style中不生效.el-table__header.el-
做弹窗里有个表格多选时,经常遇到再次打开弹窗,已选值赋值不上的问题,这里简单记录一下解决方案。element官方提供的例子经常是有各种问题的,这里经常是toggleSelection不生效toggleRowSelection是用来控制table表格选择框回显的方法,这个方法有两个参数toggleRowSelection(item,true),第一个参数是你准备回显哪一项,也就是表格对应的哪一行,第二个就是那个勾勾,true就是勾选上。一般遇到的业务是,第一次打开选中了,然后有个列表回显选中的值,再有个编辑,点编辑回显选中的,然后就会遇到选中不生效的问题…直接上解决方案:1、赋值前先清空值cle
效果预览实现思路data中定义selectedList数组保存选中的数据在页面初次渲染、翻页、切换每页数据数量等每次重新获取表格数据渲染表格时,都根据selectedList勾选表格中已经选中的行切换单行勾选状态时,判断是选中还是取消选中,选中则增加选中项,取消选中则移除选中项。切换全选和取消全选时,根据当前页选中行的数据进行更新,若选中行已在selectedList中则不再重复添加,否则添加,对于其他非选中行若已在selectedList中,则从selectedList中移除。技术难点1.不能使用selection-change的原因selection-change的参数为当前页选中的所有行