vue3 el-table 展开行：动态控制是否可展开、隐藏展开行图标

效果图：

html

<el-table
    ref="expandTable"
    row-key="id"
    :cell-class-name="cellClassName"
    @expand-change="expandChange"
    ...
>

js

const expandTable = ref()

/* 禁止点开 */
const expandChange = ( row )=>{
    // 判断条件
    if(row.subTaskList.length < 1){
       expandTable.value.toggleRowExpansion(row, false)
    }
}

/* 隐藏没有子任务 展开行的icon*/
const cellClassName = ({ row, columnIndex})=>{
    if(columnIndex === 0 && row.subTaskList.length < 1){
       return 'displayCellIcon'
    }
    return ''
}

css

.displayCellIcon .el-table__expand-icon {
    display: none;
}