踩坑记28 el-table default-sort属性 sort() 排序 & 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传数据前调用即可。

2021.10.26更新排序函数 sortData(data,sign)，解决父项是单个则无法通过Array.sort排序多个子项的问题。采用的方法是使用Array.map确保访问到每个子项。

// el-table调用
<el-table :data='sortData(infoTable,"sortCode")' row-key="itemId" >
...
// 排序(2021.10.26更新)，sign需为Number
export function sortData(data,sign){
    data=data.sort((a,b)=>{
        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在后
        }
    }).map(item=>{
        // 排序子项
        if(item.children && item.children.length>0){
            item.children=sortData(item.children,sign)
        }
        return item
    })
    return data
}


/*
// 排序(原版，有bug)，sign需为Number
export function sortData(data,sign){
    // 使用Array.sort存在问题：
    // 当外层只有一项时，排序函数不会被调用，也就不会排序内部的多个子项
    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的博客-优快云博客

坑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-优快云博客  

聊聊 Vue 组件命名那些事 - CNode技术社区 (cnodejs.org)

by 莫得感情踩坑机(限定)