做项目需要使用el-table展开行,但是需要点击元素展开,element-plus中的箭头不需要想要去除。首先我们需要再el-table中写一个额外的el-table-column 

1、主体核心代码:el-table-column 中写插槽

 template #default="props"中的内容就是展开行显示的内容, width="1" type="expand"  是必须填写 el-table的ref也是必须的

<el-table ref="table" max-height="80vh" :data="tableData" style="width: 100%;margin-left: 1px;"
        :header-cell-style="{ background: '#E3E4E5', color: '#606266' }">
        <el-table-column fixed="left" width="1" type="expand">
          <template #default="props">
              <!-- 你的内容 -->
          </template>
        </el-table-column>
    <!-- 其他 el-table-column-->
</el-table>

 2、将自带的箭头取消掉 

css部分

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

3、点击某个元素显示展开行

<el-table ref="table" max-height="80vh" :data="tableData" style="width: 100%;margin-left: 1px;"
        :header-cell-style="{ background: '#E3E4E5', color: '#606266' }">
        <el-table-column fixed="left" width="1" type="expand">
          <template #default="props">
              <!-- 你的内容 -->
          </template>
        </el-table-column>

 <el-table-column fixed="left" width="140" prop="1">
          <template #header>
            <div class="top-box">
              <div>头部</div>
            </div>
          </template>
          <template #default="scope">
              <div class="icon-box icon-box-shou" @click="show(scope.row)">
                   点我
              </div>
          </template>
        </el-table-column>

    <!-- 其他 el-table-column-->
</el-table>

4、逻辑代码部分

自定义了一个show方法,使用toggleRowExpansion方法把当前点击的内容传进去,就能展开对应行

const table: any = ref(null)
const show = (row: any) => {
  // console.log(row);

  if (table.value) {
    table.value.toggleRowExpansion(row)
  }
}

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐