Vue+Element 仿飞书表格||甘特图表格 ,搜索、筛选、字段管理、卡片管理功能

置顶

李泽举

已于 2023-08-20 15:54:28 修改

阅读量7.4k

点赞数 9

分类专栏：前端踩坑合集文章标签： vue.js 甘特图 javascript

于 2022-06-30 18:21:51 首次发布

本文链接：https://blog.csdn.net/weixin_45895806/article/details/125545657

版权

本文介绍了一款具有自定义筛选、表头颜色管理和视图切换功能的表格组件，支持列表与卡片视图切换，同时包含搜索、筛选、字段管理与导出功能。代码示例展示了如何集成和使用该组件，尽管存在优化空间，但能满足瀑布流开发场景的需求。

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

一、整体效果图

在这里插入图片描述

二、选中数据效果

在这里插入图片描述

注明：此表格是表头自定义多类型筛选的升级版

涉及到的组件代码会以链接的形式贴出来
涉及到的Scss变量、样式、接口方法，请自行调试
列表的表头及每列数据均由后端返回
列表当中数据的状态颜色、tag标签均可配置
效果仅针对记录当前项目功能效果的实现
Zn开头的组件为全局加载,请自行引入加载
列表无数据或无权限时prop传入图片路径及提示语即可,(此处可优化)
表格第一列序号与复选框hover切换
表格上方左侧为视图类别,类似tabs切换,类型不同,展示的数据形式也不同 , 比如下方数据展示有可能是列表, 有可能是card(创建视图功能暂未开发 , 目前只做了类型切换的展示 , 具体样子可去飞书观看一下)

三、页面示例代码

<template>
  <div class="workOrder-container">
    <zn-query-form>
      <zn-query-form-left-panel>
        <zn-views-tabs :options="viewsTabsOptions" @upTable="getHeader" />
      </zn-query-form-left-panel>
      <zn-query-form-right-panel>
        <!-- 搜索 -->
        <zn-search-btn @up-Search="upSearch" />
        <!-- 筛选 -->
        <zn-screen-btn
          ref="ZnScreenBtn"
          :mark="mark"
          :views_id="queryForm.views_id"
          :options="managementOptions"
          @upTable="fetchData"
        />
        <!-- 字段管理 -->
        <zn-field-management-btn
          ref="ZnFieldManagementBtn"
          v-if="viewsType == 'table'"
          :mark="mark"
          :views_id="queryForm.views_id"
          :options="managementOptions"
          @upTable="upTableData"
        />
        <!-- 卡片管理 -->
        <zn-card-management-btn
          ref="ZnCardManagementBtn"
          v-if="viewsType == 'gallery'"
          :mark="mark"
          :views_id="queryForm.views_id"
          :options="managementOptions"
          @upCard="upCardData"
        />
        <!-- 导出全部 -->
        <el-button
          type="primary"
          size="medium"
          plain
          @click="reportAll"
          v-permissions="{
   
            permission: ['workOrder:workOrder:allWorkOrder:export'],
          }"
        >
          <zn-icon :iconName="'emport'" />
          导出
        </el-button>
        <el-button
          class="el-add"
          type="primary"
          size="medium"
          @click="addWorkOrder"
          v-permissions="{ permission: ['workOrder:allWorkOrder:add'] }"
        >
          <zn-icon :iconName="'callcenter-add'" />
          新建工单
        </el-button>
      </zn-query-form-right-panel>
    </zn-query-form>
    <!-- 相册试图页面 -->
    <div
      v-if="viewsType === 'gallery'"
      class="content-view album-view"
      v-infinite-scroll="loadMore"
      :infinite-scroll-immediate="false"
    >
      <zn-filter-album
        ref="filterAlbum"
        :albumData="tableList"
        :finallyColumns="finallyColumns"
        :deatilsPath="deatilsPath"
        :indexColumn="indexColumn"
        @fetch-data="fetchData"
      />
    </div