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>