element table 展开行自定义展开方式与触发方式

最新推荐文章于 2025-04-11 12:17:20 发布

夹道欢呼

最新推荐文章于 2025-04-11 12:17:20 发布

阅读量1.7k

点赞数

文章标签： vue.js 前端 javascript sass

本文链接：https://blog.youkuaiyun.com/qq_37130872/article/details/127103632

版权

本文分享了如何在Element UI的表格组件中实现自定义的行展开功能和编辑按钮。通过示例代码展示了如何监听点击事件来控制行的展开与关闭，并在展开行中嵌入编辑组件。同时，对样式进行了调整以隐藏默认的展开图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

element官网并没有给我们自定义table行展开的自定义方式与自定义展开按钮，所以只能自己通过一些其他方法达到这个需求

直接上代码

          <el-table ref="tableRef" :data="tableData" style="width: 100%; overflow: hidden">
              <el-table-column label="类型">
                <template #default="{ row }">
                  <span>{{ DNSSwitch(row.record.type) }}</span>
                </template>
              </el-table-column>
              <el-table-column label="名称" prop="record.name" />
              
              <el-table-column label="操作" align="right" width="100">
                <template #default="{ row, $index }">
                  <span
                    class="text-[#3370FF] relative inline-block"
                    @click="toogleExpand(row, $index)"
                  >
                    编辑
                  </span>
                </template>
              </el-table-column>
              <el-table-column type="expand" width="0">
<!-- 展开行内容 -->
                <template #default="{ row }">
                  <NewEditor :record="row" @submit="getTableList" />
                </template>
              </el-table-column>
            </el-table>

import { ref } from 'vue'
const tableRef = ref()


/**模拟表格展开行 */
const toogleExpand = (row: DnsList) => {

  const $table = tableRef.value
  tableData.value.map((item) => {
    if (row.ID != item.ID) {
      $table.toggleRowExpansion(item, false)
    }
  })
  $table.toggleRowExpansion(row)
}

<style lang="scss">
 .el-table__expand-icon {
    display: none;
  }
</style>