1.table代码
需注意的是显示的时间信息什么的都是后端的接口 动态拿的
<el-table :data="tableData" ref="table" row-key="id" border lazy :tree-props="{ children: 'children' }" default-expand-all > <el-table-column label="人员名称" header-align="center" :cell-style="tablrow" > <template #default="scope"> <span> <span v-if="scope.row.children">单位:</span>{{ scope.row.name }} </span> <div class="btn" v-if="!scope.row.name"> <i @click="batchclick(scope)" title="批量排班" class="el-icon-s-custom" style="font-size: 14px; font-weight: bold; margin-right: 5px" ></i> </div> </template> </el-table-column> <el-table-column header-align="center" v-for="(item, index) in column" :key="index" > <template #header> <div :class="['table-header', item.prop == today ? 'current' : '']"> <div>{{ item.label }}</div> <div>{{ item.prop }}</div> </div> </template> <template #default="scope"> <div style="text-align: center; min-height: 35px"> <div v-for="(itemOne, index) in scope.row.list" :key="index"> <span v-if="item.prop === itemOne.date">{{ itemOne.name.replace(/\$[^,]+/g, '').replace(/\$/, '').replace(/\s*/g,"") }}</span> </div> </div> <div class="btn" v-if="!scope.row.children"> <i title="添加" @click="tableadd(scope, item.prop)" v-if="!scope.row[item.prop]" class="el-icon-plus blue" style="font-size: 14px; font-weight: bold; margin-right: 5px" ></i> <i title="修改" @click="tableadd(scope, item.prop)" v-if="scope.row[item.prop]" class="el-icon-edit blue" style="font-size: 14px; font-weight: bold; margin-right: 5px" ></i> <i title="删除" @click="tabledelete(scope, item.prop)" v-if="scope.row[item.prop]" class="el-icon-delete blue" style="font-size: 14px; font-weight: bold; margin-right: 5px" ></i> </div> </template> </el-table-column> </el-table>
需要注意的数组:
//后端返回的数据
const rows = [ {
"2023-07-10":"鲍国详$13108801938_7af0f4d220f048fe88d440738cb07ceb_false",
"2023-07-11": "",
"2023-07-12": "",
"2023-07-13": "",
"2023-07-14": "",
"2023-07-15": "",
"2023-07-16": "鲍国详$13108801938_7af0f4d220f048fe88d440738cb07ceb_false",
jobid: "e03a8b1c6658453f85b0bb8a067eb096",
jobname: "战备值班",
orgid: "c09291e2b50c4359b101c12ac2c415ef",
orgname: "通信营",
},
{
"2023-07-10":
"鲍国详$13108801938_7af0f4d220f048fe88d440738cb07ceb_false",
"2023-07-11": "",
"2023-07-12": "",
"2023-07-13": "",
"2023-07-14": "",
"2023-07-15": "",
"2023-07-16": "",
jobid: "95bfbdfac6504b4895604657386e8984",
jobname: "战备值班",
orgid: "c09291e2b50c4359b101c12ac2c415ef",
orgname: "通信营",
},
{
"2023-07-10":
"鲍国详$13108801938_7af0f4d220f048fe88d440738cb07ceb_false",
"2023-07-11": "",
"2023-07-12": "",
"2023-07-13": "",
"2023-07-14": "",
"2023-07-15": "",
"2023-07-16": "",
jobid: "f52837c74abe43b8967ff5e0c898c652",
jobname: "战备值班",
orgid: "bf5cb113cdda4733974d481e292ee8d6",
orgname: "信息支援站",
},
{
"2023-07-10":
"鲍国详$13108801938_7af0f4d220f048fe88d440738cb07ceb_false",
"2023-07-11": "",
"2023-07-12": "",
"2023-07-13": "",
"2023-07-14": "",
"2023-07-15": "",
"2023-07-16": "",
jobid: "f20ccb9ebcb249238e410b6620fb6034",
jobname: "战备值班",
orgid: "288a392e54bc4532883754f5cb341d59",
orgname: "汽车连",
},
{
"2023-07-10":
"鲍国详$13108801938_7af0f4d220f048fe88d440738cb07ceb_false",
"2023-07-11": "",
"2023-07-12": "",
"2023-07-13": "",
"2023-07-14": "",
"2023-07-15": "",
"2023-07-16": "",
jobid: "f20ccb9ebcb249238e410b6620fb6034",
jobname: "战备值班",
orgid: "288a392e54bc4532883754f5cb341d59",
orgname: "汽车连",
},
];
转成需要的tableData:
const list = [{
id:'c09291e2b50c4359b101c12ac2c415ef',
name:'通信营',
children:[{
parentId:'c09291e2b50c4359b101c12ac2c415ef',
id:'e03a8b1c6658453f85b0bb8a067eb096',
name:'战备值班',
list:[
{ "2023-07-10":"鲍国详$13108801938_7af0f4d220f048fe88d440738cb07ceb_false",},
{"2023-07-11": "",},
{"2023-07-12": "",},
{"2023-07-13": "",},
{"2023-07-14": "",},
{"2023-07-15": "",},
{"2023-07-16": "鲍国详$13108801938_7af0f4d220f048fe88d440738cb07ceb_false",}
]
},
{
parentId:'c09291e2b50c4359b101c12ac2c415ef',
id:'f20ccb9ebcb249238e410b6620fb6034',
name:'战备值班',
list:[
{date: "2023-07-10",name:"鲍国详$13108801938_7af0f4d220f048fe88d440738cb07ceb_false",},
{date:"2023-07-11",name: "",},
{date:"2023-07-12",name: "",},
{date:"2023-07-13",name: "",},
{date:"2023-07-14",name: "",},
{date:"2023-07-15",name: "",},
{date:"2023-07-16",name: "鲍国详$13108801938_7af0f4d220f048fe88d440738cb07ceb_false",}
]
},
]}
js部分
beforeMount() { this.getColumnsApi(); }, mounted() {}, methods: { // 上周 本周 下周 onWeek(e) { this.wtype = e; this.getColumnsApi(); }, // 普通日期 getColumnsApi() { this.apiObj .getColumns({ wtype: this.wtype, wdate: this.startDate, }) .then((res) => { this.startDate = res.data.startDate; this.today = res.data.today; this.weeks = res.data.weeks; //星期 this.dateArray = res.data.array; this.column = this.dateArray.map((date, index) => ({ label: this.weeks[index], prop: date, })); this.getList(); }); }, //获取数据 getList() { this.apiObj .findByWeek({ wdate: this.startDate, }) .then((res) => { this.dataList(res.data.rows); }); }, // 时间查询 daygetColumnsApi() { this.apiObj .daygetColumns({ startdate: this.startdate, enddate: this.enddate, }) .then((res) => { this.startDate = res.data.startDate; this.today = res.data.today; this.weeks = res.data.weeks; //星期 this.dateArray = res.data.array; this.column = this.dateArray.map((date, index) => ({ label: this.weeks[index], prop: date, })); this.findByWeekApi(); }); }, // 日期获取数据 接口获取年月日 findByWeekApi(){ this.apiObj .findByDay({ startdate: this.startdate, enddate: this.enddate, }) .then((res) => { this.dataList(res.data.rows); }); }, //重组数据 这块是把数组组成自己的数组 比较重要 dataList(rows) { this.$nextTick(() => { let ele = document.querySelector(".current"); if (ele) { ele.parentElement.parentElement.classList.add("state"); } else { document.querySelector(".state")?.classList.remove("state"); } }); // 创建一个空的结果数组 const list = []; rows.forEach((row) => { const existingOrg = list.find((org) => org.id === row.orgid); if (existingOrg) { // 判断children const existingJob = existingOrg.children.find( (job) => job.id === row.jobid ); if (existingJob) { existingJob.list.push( ...Object.keys(row) .filter( (key) => key !== "orgid" && key !== "jobid" && key !== "jobname" ) .map((key) => ({ date: key, name: row[key], })) ); } else { existingOrg.children.push({ parentId: row.orgid, id: row.jobid, name: row.jobname, list: Object.keys(row) .filter( (key) => key !== "orgid" && key !== "jobid" && key !== "jobname" ) .map((key) => ({ date: key, name: row[key], })), }); } } else { list.push({ id: row.orgid, name: row.orgname, children: [ { parentId: row.orgid, id: row.jobid, name: row.jobname, list: Object.keys(row) .filter( (key) => key !== "orgid" && key !== "jobid" && key !== "jobname" ) .map((key) => ({ date: key, name: row[key], })), }, ], }); } }); this.tableData = list; }, tableclick() { this.$emit("tableclick"); }, },
css部分
.table-header { text-align: center; } :deep(.state) { background-color: #d3fcd3 !important; } :deep(.state::before) { content: "今天"; position: absolute; top: 0; left: 0; background-color: #1c6e08; padding: 2px 4px; color: #fff; } :deep(.unit-bg) { background-color: #d9edf7; } .blue:hover { color: #1c8fec; } ::v-deep .el-table__row--level-0{ background:rgba(158, 234, 139, 0.2); }
显示效果如图所示:
最后
感谢阅读,如有不足之处,欢迎在评论区讨论!