当前位置: 首页 > 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. 如何…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

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

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

宇树科技,改名了!

提到国内具身智能和机器人领域的代表企业&#xff0c;那宇树科技&#xff08;Unitree&#xff09;必须名列其榜。 最近&#xff0c;宇树科技的一项新变动消息在业界引发了不少关注和讨论&#xff0c;即&#xff1a; 宇树向其合作伙伴发布了一封公司名称变更函称&#xff0c;因…...

脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

Canal环境搭建并实现和ES数据同步

作者&#xff1a;田超凡 日期&#xff1a;2025年6月7日 Canal安装&#xff0c;启动端口11111、8082&#xff1a; 安装canal-deployer服务端&#xff1a; https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...

深入理解 React 样式方案

React 的样式方案较多,在应用开发初期,开发者需要根据项目业务具体情况选择对应样式方案。React 样式方案主要有: 1. 内联样式 2. module css 3. css in js 4. tailwind css 这些方案中,均有各自的优势和缺点。 1. 方案优劣势 1. 内联样式: 简单直观,适合动态样式和…...

高保真组件库:开关

一:制作关状态 拖入一个矩形作为关闭的底色:44 x 22,填充灰色CCCCCC,圆角23,边框宽度0,文本为”关“,右对齐,边距2,2,6,2,文本颜色白色FFFFFF。 拖拽一个椭圆,尺寸18 x 18,边框为0。3. 全选转为动态面板状态1命名为”关“。 二:制作开状态 复制关状态并命名为”开…...