当前位置: 首页 > news >正文

vue动态table 动态表头数据+动态列表数据

效果图:
在这里插入图片描述

<template><div style="padding: 20px"><el-scrollbar><div class="scrollbar-flex-content"><div class="opt-search"><div style="width: 100px"> </div><div class="opt-box"><el-button type="primary" @click="selectClounm"> 选择列 </el-button><el-dropdown placement="bottom-start" style="margin: 0 15px"><el-button type="primary"> 批量操作 </el-button><template #dropdown><el-dropdown-menu><el-dropdown-item><el-icon><View /></el-icon>批量转换工作项状态</el-dropdown-item><el-dropdown-item @click="handleBatch('copy')"><el-icon><CopyDocument /></el-icon> 批量复制</el-dropdown-item><el-dropdown-item @click="deleteDatil"><el-icon><DeleteFilled /></el-icon>批量删除</el-dropdown-item><el-dropdown-item @click="handleBatch('move')"><el-icon><Switch /></el-icon> 批量移动</el-dropdown-item><el-dropdown-item><el-icon><HelpFilled /></el-icon> 导入需求</el-dropdown-item><el-dropdown-item><el-icon><HelpFilled /></el-icon> 导出需求</el-dropdown-item></el-dropdown-menu></template></el-dropdown></div></div><!-- <div>选择结果: {{ multipleSelection }}</div> --><el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" v-loading="loading" table-layout="auto"><el-table-column type="selection" width="55" fixed/><el-table-column sortable label="Id" prop="workitemId" fixed width="150" align="center"></el-table-column><el-table-columnsortablev-for="item in showTableColumn":key="item.prop":fixed="item.fixed":align="item.align":prop="item.prop":min-width="item.minWidth":width="item.width":show-overflow-tooltip="item.tooltip":resizable="item.resizable":label="item.label":formatter="formatterValue"><template #default="{row}"><!-- link --><template v-if="item.prop === 'title'"><el-link  type="primary" :underline="false" @click="showDetail(row)"> {{row.title }} </el-link></template><template v-if="item.prop === 'description'"><span v-html="formattedUsers(row.description)"></span></template></template></el-table-column><!-- <el-table-column prop="action" label="操作" width="100"><template #default="scope"><el-buttonsize="small"type="primary"linkicon="Edit"@click="edit(scope.row)">编辑</el-button></template></el-table-column> --></el-table><el-paginationstyle="margin-top: 20px"v-model:current-page="pager.num"v-model:page-size="pager.size":page-sizes="[10, 20, 30, 50]"layout="total,sizes, prev, pager, next":total="total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div></el-scrollbar></div><listTable ref="rowRef" /><batchActionDialogv-model="batchTypeV"v-model:visible="batchTypeV":batchType="batchType":title="`${batchType === 'move' ? '移动' : '复制'}工作项`"></batchActionDialog><showDialog ref="showDialogRef" :showTableColumn="citiesArr" @reqGetlist="reqGetlist" @reqGetProjectViews="reqGetProjectViews" :itemsArr="items" :visible.sync="visible" @closeShowDialog="closeShowDialog"></showDialog><detailShowDialog ref="RefdetailShowDialog" :detailTitle="detailTitle" :detailVisable.sync="detailVisable" @reqGetlist="reqGetlist" @reqGetProjectViews="reqGetProjectViews" @closeDetailDialog="closeDetailDialog"></detailShowDialog>
</template><script setup>
import { ref, onMounted, computed, watch, nextTick } from 'vue'
import { treeTask , listColumns, tabledrawer, workitemInstIds,projectId } from '../info'
import listTable from './listComponents/list-table.vue'
import { deleteInst,allFilterFields,getlist } from '@/api/workitem'
import batchActionDialog from './detailComponents/batchAction.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import showDialog from './components/workflow/listShowDialog.vue'
import detailShowDialog from './components/workflow/detailShowDialog.vue'
import asc from "@/utils/asc.js"
const checkedValues = ref([])
const expandableColumns = ref([])let loading = ref(true)
let showTableColumn = ref([])
let visible = ref(false)const formattedUsers = (val)=> { return JSON.parse(JSON.stringify(asc.decrypt(val)))
}const multipleSelection = ref([]);
const handleSelectionChange = (rows) => {// console.log(rows)workitemInstIds.value = rows.map((item) => item.workitemInstId)multipleSelection.value = workitemInstIds.value// console.log(workitemInstIds.value.join(','))
}
watch(() => treeTask.value.workitemTypeId,() => {// drawTable()reqGetProjectViews()reqGetlist()}
)const edit = (row) => { console.log(row);
}
let detailVisable = ref(false)
let RefdetailShowDialog = ref(false)
let detailTitle = ref('')
const showDetail = (row) => {// console.log(row);detailTitle.value = {workitemTypeIcon:row.workitemTypeIcon,workitemId:row.workitemId,title:row.title// `${row.workitemId} - ${row.title}`}detailVisable.value = trueRefdetailShowDialog.value.oneDetail(row.workitemInstId)
}
const closeDetailDialog = () => { detailVisable.value = false
}
//
let citiesArr = computed(() => {let cities =  showTableColumn.value.map(item => item.label)return cities
})
let items = computed(() => {let items = showTableColumn.value.map((item, index) => {return {...item,id: index + 1,checked: true};
});return items
})
onMounted(() => {// drawTable()reqGetProjectViews()reqGetlist()
})
const pager =reactive({num: 1,size: 10
})
const handleSizeChange = (val) => {pager.size = valreqGetlist()
}
const handleCurrentChange = (val) => {pager.num = valreqGetlist()
}let showDialogRef = ref('')
const selectClounm = async () => {visible.value = true
}
// 关闭弹层
const closeShowDialog = () => { visible.value = false
}// 表头
const reqGetProjectViews = async()=>{ const { rows:res } = await allFilterFields(projectId.value, treeTask.value.workitemTypeId ||'202501101355540000079e3d84c60223')const arr = res.map(item => ({...item,prop: item.name,tooltip: true,align: 'center',}))showTableColumn.value = arr.sort((a, b) => a.sort - b.sort )console.log(showTableColumn.value);// console.log(arr);
}const SearchText = ref(null)
const total = ref(0)
const tableData = ref([])
// 列表
const reqGetlist = async () => {loading.value = true const res = await getlist({pageNum: pager.num,pageSize: pager.size,title: SearchText.value});tableData.value = res.rows.map(item => ({workitemType: item.workitemTypeName,status: item.status,testResult: item.title,title: item.title,assignee: item.assignee,testSteps: item.title,description: item.description,project: item.projectName,priority:item.priority,author: item.createBy,workitemId: item.workitemId,workitemInstId: item.workitemInstId,workitemTypeIcon:item.workitemTypeIcon}))total.value = res.totalloading.value = false
}const rowRef = ref(null)//删除,移动,复制-------------------------------------------------
let handleNodeClick = inject('handleNodeClick')
const deleteDatil = () => {deleteInst(workitemInstIds.value.join(',')).then(({ code }) => {handleNodeClick(treeTask.value)VFormRenderV.value = falsecheckListIndex.value = nulllistTask.value = {}infoTaskIcon.value = ''ElMessage.success('删除成功!')})
}
const batchType = ref('')
const batchTypeV = ref(false)
const handleBatch = (type) => {batchType.value = typebatchTypeV.value = true
}
const getTableHeight = computed(() => {console.log(window.innerHeight - 440, 's duosao')return window.innerHeight - 440
})
</script>
<style lang="scss" scoped>
.check {display: flex;align-items: center;
}
.checkbox-group-flex {margin-left: 10px;display: flex;flex-direction: column; /* 设置为列方向布局,使内部元素垂直排列 */
}
.opt-search {flex-shrink: 0;padding: 10px 0;display: flex;align-items: center;justify-content: space-between;border-bottom: 1px solid #fdfdfd;.opt-box {display: flex;align-items: center;}
}
.borderno {--el-tag-border-color: none;
}</style>

相关文章:

vue动态table 动态表头数据+动态列表数据

效果图: <template><div style"padding: 20px"><el-scrollbar><div class"scrollbar-flex-content"><div class"opt-search"><div style"width: 100px"> </div><div class"opt-b…...

1.3 GPT vs BERT 终极选择指南:从架构差异到企业级落地策略

GPT vs BERT 终极选择指南&#xff1a;从架构差异到企业级落地策略 引言&#xff1a;两大巨头的分道扬镳 2018年&#xff0c;BERT和GPT系列同时引爆NLP领域&#xff0c;却在架构选择上走向截然不同的道路&#xff1a; BERT采用双向Transformer Encoder&#xff0c;在11项NLP…...

python-leetcode 23.回文链表

题目&#xff1a; 给定单链表的头节点head,判断该链表是否为回文链表&#xff0c;如果是&#xff0c;返回True,否则&#xff0c;返回False 输入&#xff1a;head[1,2,2,1] 输出&#xff1a;true 方法一&#xff1a;将值复制到数组中后用双指针法 有两种常用的列表实现&#…...

食品饮料生产瓶颈?富唯智能协作机器人来 “破壁”

在食品和饮料行业的发展进程中&#xff0c;诸多生产瓶颈如重复性劳动负担、复杂环境作业难题、季节性产能波动等&#xff0c;长期制约着企业的高效运营与进一步发展。如今&#xff0c;富唯智能协作机器人的出现&#xff0c;为这些难题提供了完美的解决方案&#xff0c;正逐步改…...

Golang GORM系列:GORM CRUM操作实战

在数据库管理中&#xff0c;CRUD操作是应用程序的主干&#xff0c;支持数据的创建、检索、更新和删除。强大的Go对象关系映射库GORM通过抽象SQL语句的复杂性&#xff0c;使这些操作变得轻而易举。本文是掌握使用GORM进行CRUD操作的全面指南&#xff0c;提供了在Go应用程序中有效…...

C++ labmbd表达式

文章目录 C++ Lambda 表达式详解1. Lambda 表达式的组成部分:2. Lambda 语法示例(1) 最简单的 Lambda(2) 带参数的 Lambda(3) 指定返回类型的 Lambda3. 捕获外部变量(1) 值捕获(复制)(2) 引用捕获(3) 捕获所有变量4. Lambda 在 STL 中的应用5. Lambda 作为 `std::function`6…...

《大规模动画优化(一):GPU 顶点动画的生成》

GPU 顶点动画&#xff08;Vertex Animation Texture, VAT&#xff09; GPU 顶点动画&#xff08;Vertex Animation Texture, VAT&#xff09;烘焙的核心思想是&#xff1a; 在 CPU 端预先计算动画顶点数据&#xff0c;并存储到纹理&#xff08;Texture2D&#xff09;中&#xf…...

【前端】几种常见的跨域解决方案

在前端开发中&#xff0c;跨域问题是常见的挑战。以下是几种常见的跨域解决方案&#xff1a; 1. Nginx反向代理 使用 Nginx 进行反向代理是解决跨域问题的一种常见方式。Nginx 会充当一个中间代理服务器&#xff0c;接收来自前端的请求并将其转发到实际的后端 API 服务&#…...

如何在WinForms应用程序中读取和写入App.config文件

如何在WinForms应用程序中读取和写入App.config文件 1. 添加App.config文件2. 配置App.config3. 读取App.config4. 写入App.config 在WinForms应用程序中&#xff0c; App.config文件是用于存储配置数据的标准方式。通过使用.NET框架提供的类库&#xff0c;我们可以方便地对 …...

【分布式理论7】分布式调用之:服务间的(RPC)远程调用

文章目录 一、RPC 调用过程二、RPC 动态代理&#xff1a;屏蔽远程通讯细节1. 动态代理示例2. 如何将动态代理应用于 RPC 三、RPC序列化与协议编码1. RPC 序列化2. RPC 协议编码2.1. 协议编码的作用2.2. RPC 协议消息组成 四、RPC 网络传输1. 网络传输流程2. 关键优化点 一、RPC…...

人工智能应用-智能驾驶精确的目标检测和更高级的路径规划

实现更精确的目标检测和更高级的路径规划策略是自动驾驶领域的核心任务。以下是一个简化的示例&#xff0c;展示如何使用Python和常见的AI库&#xff08;如TensorFlow、OpenCV和A*算法&#xff09;来实现这些功能。 1. 环境准备 首先&#xff0c;确保安装了以下库&#xff1a;…...

dynamic_cast和static_cast和const_cast

dynamic_cast 在 C 中的作用 dynamic_cast 是 C 运行时类型转换&#xff08;RTTI, Run-Time Type Identification&#xff09;的一部分&#xff0c;主要用于&#xff1a; 安全的多态类型转换检查类型的有效性向下转换&#xff08;Downcasting&#xff09;跨类层次的指针或引用…...

DEEPSEEK与GPT等AI技术在机床数据采集与数字化转型中的应用与影响

随着人工智能&#xff08;AI&#xff09;技术的迅猛发展&#xff0c;深度学习、自然语言处理等先进技术开始广泛应用于各行各业。在制造业尤其是机床行业&#xff0c;AI技术的融合带来了巨大的变革&#xff0c;尤其在机床数据采集与机床数字化方面的应用。本文将探讨DEEPSEEK、…...

高速存储文章目录

《zynq tcp万兆网和ftp协议分析-CSDN博客》 《国产fpga nvme ip高速存储方案设计_fpga 高速存储-CSDN博客》 《国微pcie switch 8748高速存储方案设计_国产pcie switch-CSDN博客》 《FPGA SATA高速存储设计-CSDN博客》 《FPGA NVME高速存储设计_690t fpga-CSDN博客》 《zy…...

车载测试工具 --- CANoe VH6501 进行Not Acknowledge (NAck) 测试

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 简单,单纯,喜欢独处,独来独往,不易合同频过着接地气的生活,除了生存温饱问题之外,没有什么过多的欲望,表面看起来很高冷,内心热情,如果你身…...

【清晰教程】通过Docker为本地DeepSeek-r1部署WebUI界面

【清晰教程】本地部署DeepSeek-r1模型-CSDN博客 目录 安装Docker 配置&检查 Open WebUI 部署Open WebUI 安装Docker 完成本地DeepSeek-r1的部署后【清晰教程】本地部署DeepSeek-r1模型-CSDN博客&#xff0c;通过Docker为本地DeepSeek-r1部署WebUI界面。 访问Docker官…...

Linux运维——用户管理

Linux用户管理 一、Linux用户管理要点二、常用命令2.1、groupadd2.2、groupdel2.3、groupmod2.4、groups2.5、useradd2.6、userdel2.7、passwd2.9、su2.10、sudo2.10.1、给普通用户授权 sudo2.10.2、 免密码授权 sudo 一、Linux用户管理要点 创建用户组 - 使用 groupadd删除用…...

mac下dify+deepseek部署,实现私人知识库

目前deepseek 十分火爆&#xff0c;本地部署实现私有知识库&#xff0c;帮助自己日常工作&#xff0c;上一篇使用工具cherry studio可以做到私人知识库。今天学习了一下&#xff0c;使用Dify链接deepseek&#xff0c;实现私人知识库&#xff0c;也非常不错&#xff0c;这里分享…...

Linux中设置开机运行指令

系统&#xff1a;Debian 12 使用systemd来设置开机自启动脚本或命令是一个更加现代且推荐的方法。下面是具体的步骤&#xff1a; 创建守护脚本 首先&#xff0c;你需要创建一个Shell脚本文件&#xff0c;比如mydaemon.sh&#xff0c;并在其中编写你的守护脚本逻辑。确保这个脚…...

IDEA中列举的是否是SpringBoot的依赖项的全部?在哪里能查到所有依赖项,如何开发自己的依赖项让别人使用

在 IntelliJ IDEA 中列举的依赖项并不一定是 Spring Boot 项目的全部依赖项。IDEA 通常只显示你在 pom.xml&#xff08;Maven&#xff09;或 build.gradle&#xff08;Gradle&#xff09;中显式声明的依赖项&#xff0c;而这些依赖项本身可能还会引入其他传递性依赖。 1. 如何…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

Spring Boot面试题精选汇总

&#x1f91f;致敬读者 &#x1f7e9;感谢阅读&#x1f7e6;笑口常开&#x1f7ea;生日快乐⬛早点睡觉 &#x1f4d8;博主相关 &#x1f7e7;博主信息&#x1f7e8;博客首页&#x1f7eb;专栏推荐&#x1f7e5;活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...