踩坑记28 el-table default-sort 排序 | el-table toggleRowExpansion 折叠 展开 | el-icon 导入报错 组件名与html元素名重复

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 莫得感情踩坑机(限定)

上一篇:明道云对接企查查,一键矫正客户信息


下一篇:低代码开发工具的先驱Delphi再次引领软件开发的未来