vue+element-plus+table实现值班信息管理功能

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);
}

显示效果如图所示：

最后

感谢阅读，如有不足之处，欢迎在评论区讨论！