Vue3(elementPlus) el-table替换/隐藏行箭头,点击整行展开

element文档链接:

https://element-plus.org/zh-CN/component/form.html

一、el-table表格行展开关闭箭头替换成加减号

注:Vue3在样式中修改箭头图标无效,可能我设置不对,欢迎各位来交流指导

转变思路:隐藏箭头,添加一行显示展开关闭所需图标

1、隐藏箭头

复制代码
.el-table__expand-icon .el-icon svg {
  display: none;
}

此时只是箭头不可见,但是箭头的占位还在,显得很空

2、去掉箭头空白,添加替换箭头的图标列

在显示展开内容的列标签中设置width="1"

复制代码
<el-table-column type="expand" width="1" >
  <template #default="props">
     <div class="tableItem" :style="{ width: 'calc(100%)'}" >
       <el-table :data="props.row.family">
         <el-table-column type="index" width="70" label="排名" prop="name" align="center"/>
         <el-table-column prop="projectNum" label="项目编号" align="left"/>
          <el-table-column prop="projectName" label="项目名称"  align="left"/>
       </el-table>
     </div>
  </template>
</el-table-column>

<el-table-column width="40" align="center" >
   <template #default="scope" >
      <el-icon :size="15" v-if="scope.row.expanded" color="#000000">
         <Minus/>
      </el-icon>
      <el-icon :size="15" v-else color="#000000">
          <Plus/>
      </el-icon>
   </template>
 </el-table-column>

二、点击整行展开数据

表格数据:

复制代码
const tableData = ref([
  {projectNum:'YCA20241120001',
    id:'5862458213',
    projectName:'项目名称项目名称项目名称',
    month: '2024-10',
    expanded:false,
    family: [
      {
        projectNum:'YCA20241120001',
        projectName:'项目名称项目名称项目名称',
      },{
        projectNum:'YCA20241120001',
        projectName:'项目名称项目名称项目名称',
      }
    ]
  },
  {
    id:'5862456248',
    projectNum:'YCA20241120001',
    projectName:'项目名称项目名称项目名称',
    month: '2024-11',
    expanded:false,
  }
])

使用到el-table的三个属性,含义请看element文档

row-key="id"

:expand-row-keys="expands"

@row-click="clickRowHandle"

复制代码
<el-table :data="tableData" 
     v-loading="state.loading"  
     @selection-change="selectionChangHandle"
     @sort-change="sortChangeHandle"
     :border="false" 
     style="width: 100%" 
     row-key="id"
     :expand-row-keys="expands"
      @row-click="clickRowHandle">
</el-table>

逻辑代码:

复制代码
const expands = ref([])
//点击事件
const clickRowHandle = (row: any) => {
 row.expanded=!row.expanded
 if (expands.value.includes(row.id)) {
   expands.value = expands.value.filter(val => val !== row.id)
 }else {
   expands.value.push(row.id)
 }
}

三、外部表格序号和排名序号对齐

设置表格el-table-column的padding-left和magin-left是无效的

解决方法:

:cell-style="productiontableStyle"

:headerCellStyle="productiontableStyle"

复制代码
<el-table-column type="expand" width="1" >
  <template #default="props">
     <div class="tableItem" :style="{ width: 'calc(100%)'}" >
       <el-table :data="props.row.family" :cell-style="productiontableStyle" 
                :headerCellStyle="productiontableStyle">
         <el-table-column type="index" width="70" label="排名" prop="name" align="center"/>
         <el-table-column prop="projectNum" label="项目编号" align="left"/>
          <el-table-column prop="projectName" label="项目名称"  align="left"/>
       </el-table>
     </div>
  </template>
</el-table-column>

逻辑代码:

复制代码
const productiontableStyle=(column:any) =>{
    if(column.columnIndex === 0) {
        return {'padding-left':'15px'}
    }
}
相关推荐
OLong几秒前
2025年最强React插件,支持大量快捷操作
前端·react.js·visual studio code
江城开朗的豌豆几秒前
路由守卫通关秘籍:这些钩子函数让你的页面跳转稳如老狗!
前端·javascript·vue.js
闲坐含香咀翠几秒前
记一次交互优化:从根源上解决Axios请求竞态问题
前端·http·浏览器
摸鱼仙人~6 分钟前
重塑智能体决策路径:深入理解 ReAct 框架
前端·react.js·前端框架
小小小小宇7 分钟前
ResizeObserver 和 IntersectionObserver
前端
BigTopOne9 分钟前
android jetpack 有哪些常用的组件
前端
sunbyte9 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
柚子81612 分钟前
告别FLIP动画:View Transition API带来的革命性变革
前端·javascript
level_xiwei12 分钟前
有关资源泄漏的一些知识
前端
excel13 分钟前
使用 Prisma 实现数据库字段的动态迁移实践
前端·后端