2021.9.23
坑86(el-table、default-sort、排序):el-table 表格的自动/手动排序。自动:el-table自带能力。手动:自写排序函数处理事件。
el-table自动排序参考文档: Table 表格 | ElementPlus (element-plus.org) 排序Sorting部分。
在表格上设置 default-sort 属性即可自动排序,类型为对象。prop 排序属性,order 排序方式,类型都为字符串。
// descending 降序 升序(默认)
// 经实验发现,非descending一律升序
:default-sort='{prop:"sortCode", order:"ascending"}'
!注意:如果部分数据无排序prop字段,则整体排序会混乱,甚至会多出重复数据。
另外在列上设置 sortable 属性为true时,对应列会展示上下箭头标签,点击可控制升序/降序/原序。
尝试隐藏排序字段列(失败):
1、v-show='false'无效,依然显示;
2、v-if='false'则直接不渲染,相当于没有该列数据,default-sort设置的排序将不会生效。
参考:element el-table列 显示隐藏的问题 - 收破烂的小伙子 - 博客园 (cnblogs.com)
element-ui表格组件table实现列的动态显示与隐藏 - 简书 (jianshu.com) v-if、v-for方案,隐藏列(没渲染)无法用于排序。
3、class-name方案:参考 请问一下elementui使用el-table怎么隐藏列 - SegmentFault 思否 使用class-name,其中table的table-layout属性添加与否未发现区别(scoped的style需要用到深度选择器)。在列上设置类名class-name,会传递给该列包括表头在内的每一个单元格,scoped的style需要用到深度选择器。
class-name='notShow'
:deep(.notShow){
display: none !important;
}
class-name方案存在问题:
1、若该列设置了宽度属性(在template里,style设置加important也没有效果),则该宽度会由其右侧一列延用,比如排序列设置较窄,width='60',则其右侧的名称列会变窄;
2、最右侧会留大片空白,因为各列宽度是基于排序列存在时的情况计算的。
考虑了其他table插件:Handsontable 收费,功能较全 Handsontable--在线Excel表格 - 简书 (jianshu.com)
手动排序:基于以上种种坑,最后还是写了一个排序函数 sortData(data,sign) 来实现排序。data为数据数组,sign为排序属性,此次默认采用Number类型的属性。在向el-table传数据前调用即可。
// el-table调用
<el-table :data='sortData(infoTable,"sortCode")' row-key="itemId" >
...
// 排序,sign需为Number
export function sortData(data,sign){
data.sort((a,b)=>{
if(a.children && a.children.length>0){
sortData(a.children,sign)
}
if(b.children && b.children.length>0){
sortData(b.children,sign)
}
if( typeof a[sign] ==='number' && typeof b[sign] ==='number'){
return a[sign]-b[sign] // 升序排列,小到大
}else if(typeof a[sign] !=='number' && typeof b[sign] !=='number'){
return 0 // 不变
}else if(typeof a[sign] !=='number'){
return 1 // a在后
}else{
return -1 // b在后
}
})
return data
}
坑87(el-table、折叠、展开):一键展开/折叠el-table。通过调用el-table的 toggleRowExpansion(row,isExpand) 方法实现。row 为行数据,isExpand 为是否展开。具体代码如下:
<el-button @click='handletotalExpand()'>{{isExpand?'折叠':'展开'}}</el-button>
...
const state=reactive({
isExpand:false,
})
// ref绑定到对应el-table
let infoTableRef=ref(null)
// 工具函数,实现el-table展开/折叠
// data为表格元素实例的数据数组,table为表格元素,isExpand是否展开
const expandTable=(data,table,isExpand)=>{
data.map(item=>{
table.toggleRowExpansion(item,isExpand)
if(item.children && item.children.length>0){
expandTable(item.children,table,isExpand)
}
})
}
// 处理展开/折叠
const handletotalExpand=()=>{
state.isExpand=!state.isExpand
// 调用工具函数
expandTable(infoTableRef.value.data,infoTableRef.value,state.isExpand)
}
return {
handletotalExpand,
infoTableRef,
}
参考:elementUI中el-table树形与el-tree树形结构的一键折叠与展开_cabinx的博客-CSDN博客
坑88(el-icon、导入报错):导入el-icon的switch图标时报错如下:
Do not use built-in or reserved HTML elements as component id: switch
// 不要使用内置或保留的HTML元素作为组件id
报错原因是switch图标导入组件名称设置为switch与html元素名重复了。更改导入名称即可,代码如下:
// 将switch图标的组件名称改为i-switch
// 原先设定的组件名称是switch,会报错
app.component('i-switch',Switch)
参考:Vue报错'Do not use built-in or reserved HTML elements as component id:解决方法_S筱潇S四维Smile-CSDN博客
聊聊 Vue 组件命名那些事 - CNode技术社区 (cnodejs.org)
by 莫得感情踩坑机(限定)