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

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 }"><spanclass="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.valuetableData.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>

element table 展开行自定义展开方式与触发方式相关推荐

element table手动实现自定义筛选（手动实现）
先看效果图一.前言甲方放着好好的导出,好好的excel的高级筛选不用,非要在网页中实现一个.... 最开始尝试使用的element官方的筛选,给甲方看后说和excel的筛选相差很大..好在官方有 ...
react-antd table树形数据默认展开行实现以及自定义图标实现及踩坑(defaultExpandedRowKeys,expandedRowKeys)
前言: 最近在做一个权限管理的后台项目,经常涉及到树形数据展示,就用到了antd,table表格树形数据组件.记录一下使用过程的坑. 环境及配置: antd -3.23.6(大版本为antd 3) ...
element中表格展开行的默认展开和收起
<el-tablerow-key="id":expand-row-keys="expands"></el-table><scrip ...
html表格展开明细,Element-ui的Table表格展开行功能
业务需要表格能够展开某一行,但组件中只能展开所有行,或者用table的树形数据(row 中需包含 children字段),可以通过控制 row-class-name来定义表格中需要展开的行. 通过设置 ...
elementui的table展开行显示另一关联子table表的数据
需求:主表table可实现展开行显示关联子table的列表数据 <div class="table-box"><el-tableref="enquir ...
【ElementUI优化】el-table展开行 ==＞ :expand-row-keys=“expands“ 刷新表格，保存当前操作展开行
于极迷处识迷则处处醒,将难放怀一放则万境宽. 目录一.el-table展开行(基础可跳过) 1. 展示tag信息 2. 实现添加功能问题: 二.控制el-table展开行(核心) 1.exp ...
Vue table 点击按钮展开折叠面板
vue 实现的 table 折叠展开功能,由于工作中用到,这里把相应代码整理下,方便自己日后 Copy 1.Html 部分由基本的 table 表单与折叠栏部分组成 PS:table 上需要加上 r ...
【elementUI】el-table 展开行默认关闭或打开
第一种方式: 使用 :default-expand-all="isExpand" 优点:方便,简单,页面初始化的时候给 delfault-expand-all 赋值展开或关闭缺点 ...
element ui 引入css,element-ui引入方式、自定义主题
1. element-ui组件引入方式: 1)完整引入在 main.js 中写入以下内容: import Vue from 'vue'; import ElementUI from 'element ...

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

element table 展开行自定义展开方式与触发方式相关推荐

最新文章

热门文章

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

element table 展开行 自定义展开方式与触发方式相关推荐

最新文章

热门文章

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

element table 展开行自定义展开方式与触发方式相关推荐