您好,登录后才能下订单哦!
这篇文章主要介绍了elementplus怎么实现多级表格的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇elementplus怎么实现多级表格文章都会有所收获,下面我们一起来看看吧。
总共四级 前三级是表格 第四级使用图片展示; 看了一下官网 计划使用官网的树形结构, 但是发现并不能满足最后一个是图片形式的展示
最后利用了表格的expand;
在过程中主要需要解决的问题有:vue3 递归使用组件;递归处理数据;展开全部级。
首先需要处理一下数据,把他们弄成字段一致的,如果后端处理过,前端也会需要处理一下,用于前端自己新增使用的字段 ,我这边 新增了三个字段
disableExpand: 用于我的展开表格 单行能不能展开
id: 后端没有给id字段 用于唯一标识
level: 判断当前数据是第几级数据
const getOverviewList = async () => { if (!searchParams.value.train_type_id) { return; } const resp = await Pepper.get('/api/match/detail', { params: searchParams.value }); overviewTotal.value = resp.data.list.length; overviewList.value = handleOverviewList(resp.data.list); }; const handleOverviewList = (data: OverviewListModel[], listLevel = 1) => { const result: OverviewListModel[] = data.map((item, index) => { return { ...item, // 新增字段 disableExpand: !!item.sub_number, level: listLevel, id: listLevel + '-' + index, // 处理list list: item.list && item.list.length ? handleOverviewList(item.list as OverviewListModel[], listLevel + 1) : [] }; }); return result; };
因为字段一致所以我使用的是同一个组件,需要说明的是 vue3使用自己组件的时候直接使用即可
在外层:传入所有的data
<overview-table ref="overviewTableRef" :total="overviewTotal" :data="overviewList" />
在OverviewTable组件中 直接使用OverviewTable就可;下面这个包括展开所有级的代码
展开所有级 利用@expand=“handleExpand” 修改expandKeys即可
<template> <div> <expand-table ref="tableRef" :data="data" :total="total" :pageParams="pageParams" v-model:expandRowKeys="expandKeys" v-bind="$attrs" @oneClick="rowClick" @expand="handleExpand" > <template #expand="{ row }"> <overview-table :ref="el => setOverviewDetailRef(el, row.id)" v-if="row.level !== 3" :data="row.list" :total="row.list.length" :show-header="false" :height="2000" :table-level="row.level + 1" /> <overview-table-detail v-else :data="row.list" @openDialog="openDialog" /> </template> <el-table-column prop="name" min-width="10%" label="数据类型" /> .... <el-table-column prop="sub_number" min-width="10%" label="包含下级数" > <template #default="{ row }"> <span :class="!row.sub_number ? 'no-sub' : ''">{{ row.sub_number }}</span> </template> </el-table-column> <operation-column min-width="10%" :operationOptions="operationOptions" /> </expand-table> <image-detail-dialog :showDeleteBtn="false" ref="imageDetailDialogRef" /> </div> </template> <script setup lang="ts"> import { computed, ref, inject, nextTick } from 'vue'; import ExpandTable from '@/components/table/ExpandTable.vue'; import OverviewTableDetail from './OverviewTableDetail.vue'; import ImageDetailDialog from '../../original/stop/ImageDetailDialog.vue'; import OperationColumn, { OperationOptionModel } from '@/components/table/OperationColumn.vue'; import { PageAware } from '@/model'; import { ConfigModel } from 'public/config'; import { OverviewListModel } from '@/model/registration'; import { PhotoListModel } from '@/model/original'; const props = withDefaults( defineProps<{ data: OverviewListModel[]; total: number; tableLevel?: number; }>(), { data: () => [], tableLevel: 1 } ); const pageParams = ref<PageAware>({ page_no: 1, page_size: (inject('global') as ConfigModel).registration.registrationLimit }); const tableRef = ref<InstanceType<typeof ExpandTable>>(); const overviewDetailRefs = ref<any>({}); const imageDetailDialogRef = ref<InstanceType<typeof ImageDetailDialog>>(); const expandKeys = ref<string[]>([]); const operationOptions = computed<OperationOptionModel[]>(() => { return [ { icon: 'icon-upload', title: '上传', hidden: props.tableLevel !== 1, onClick: () => {} }, { icon: 'icon-compute', title: '计算', hidden: props.tableLevel !== 2, disabled: (row: OverviewListModel) => { return row.state !== '待计算'; }, onClick: () => {} } ]; }); // 动态ref const setOverviewDetailRef = (el: any, id: number) => { if (el) { overviewDetailRefs.value[id] = el; } }; // 打开弹窗 const openDialog = (index: any, data: PhotoListModel[]) => { imageDetailDialogRef.value?.open(index, data); }; // 单击展开/关闭 const rowClick = (row: OverviewListModel) => { if (expandKeys.value.includes(row.id)) { tableRef.value?.closeRowExpansion(row); } else { expandKeys.value.push(row.id); } }; // 展开全部 const handleExpand = (ids: number[] | string[]) => { // 情况1:一级全部展开 点击其他的时候 只展开下一级 // const handleExpand = (ids: number[] | string[], autoExpand) => { // autoExpand.value = autoExpandEd ? autoExpandEd : props.tableLevel === 1; // if (!autoExpand.value) { // return; // } // 情况3:点击一级 只展开到三级 // if (props.tableLevel !== 1) { // return; // } ids.forEach(async id => { await nextTick(); const stopOverviewDetailRef = overviewDetailRefs.value[id]; if (stopOverviewDetailRef) { await stopOverviewDetailRef?.openRowExpansion(); } }); }; const openRowExpansion = () => { //情况1:一级全部展开 点击其他的时候 只展开下一级 // const ids = (props.data as OverviewListModel[]).map(i => i.id); // handleExpand(ids, true); // 情况2:点击任何一级 他下面的都展开 props.data.map(item => { if (!item.disableExpand) { return; } if (!expandKeys.value.includes(item.id)) { expandKeys.value.push(item.id); } }); }; const reset = () => { // 重新搜索的时候 关闭展开的 tableRef.value?.closeAllExpand(); expandKeys.value = []; }; defineExpose({ reset, expandKeys, openRowExpansion }); </script> <style lang="scss" scoped> :deep(.el-table__expanded-cell[class*='cell']) { padding: 0; } :deep(.el-button + .el-button) { margin-left: 0; } .no-sub { color: #b9bdc9; } // 防止弹框样式有问题 :deep(.el-table .el-table__row) { position: relative; z-index: 0; } </style>
关于“elementplus怎么实现多级表格”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“elementplus怎么实现多级表格”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。