elementplus怎么實現多級表格

這篇文章主要介紹了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怎么實現多級表格”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。