【element-plus】table 树形数据

• 需求

想要实现将双table中的展开图片(icon)去除掉

• 实现方式

在官方文档中提到了row-class-name这个方法可以属性来为table中的每一行添加class

可以利用这个方法来实现去除icon。

//template
<el-table
    :data="item.event" border style="width: 100%"
    :row-class-name="tableRowClassName"
    size="small"
    :highlight-current-row="true"
    row-key="id"
    default-expand-all>
    ..... 列表数据内容
</el-table>

给tableRowClassName都设置了icon-noclass

// script
const tableRowClassName = ({row,rowIndex}: any) => {
    return 'icon-no'
}

将icon-no下的icon设置成不显示

   // style
::v-deep .icon-no .el-table__expand-icon{
    display: none;

【总结】

• 主要是利用element-plus官方文档中table中的属性tableRowClassName来给每行设置icon-noclass
• 在style中写样式来设置icon不显示

【链接】

• element-plus官方文档: 官方表格
• 嵌套表格无数据时无法隐藏展开箭头：使用tableRowClassName来实现