vue+element-plus+tableは職務情報管理機能を実装します

1.テーブルコード

表示される時間情報はバックエンド インターフェイスによって動的に取得されることに注意してください。

  <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" 
</template>
                style="font-size: 14px; font-weight:大胆; margin-right: 5px" 
              ></i> 
            </div> 
          </template> 
        </el-table-column> 
        <el-table-column 
          header- align="center" 
          v-for="(項目, インデックス) 列" 
          :key="index" 
        > 
          <template #header> 
            <div :class="['table-header', item.prop == 今日 ? 'current' : '']"> 
              <div>{ 
  
  { item.label }}</div> <div> { { item.label }} 
              </div> <div>{ 
  
  { item.label }}</div>prop }}</div> 
            </div> 
          </template> 
          <template #default="scope">
                prop]" style="font-size: 14px; フォントの太さ: 太字; margin-right: 5px" 
              ></i>
  
  
                  
                class="el-icon-plus blue"
              <i 
                title="修正" 
                @click="tableadd(scope, item.prop)" 
                v-if="scope.row[item.prop]" 
                class="el-icon-edit blue" 
                style="font-size : 14px; font-weight: 太字; 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:太字; margin-right:
              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() {},
  メソッド: { 
    // 先週、今週、来週
    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((日付, インデックス) => ({
            ラベル: this.weeks[インデックス],
            プロパティ: 日付, 
          })); 
          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) => { 
        constexistingOrg = list.find((org) => org.id === row.orgid) ; 
        if (existingOrg) { 
          // 子を決定する
          const 既存ジョブ = 既存Org.children.find( 
            (ジョブ) => job.id === row.jobid 
              parentId: row.orgid, 
              id: row.jobid, 
          );
          if (existingJob) { 
            existingJob.list.push( 
              ...Object.keys(row) 
                .filter( 
                  (key) => 
                    key !== "orgid" && key !== "jobid" && key !== "jobname " 
                ) 
                .map((key) => ({
                  日付: key,
                  名前: row[key], 
                })) ) 
            ; 
          } else { 
            existingOrg.children.push({ 
                  (key) =>
              名前: row.jobname、
              リスト: Object.keys(row) 
                .filter( 
                    key !== "orgid" && key !== "jobid" && key !== "jobname" 
                ) 
                .map((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" && キー ! 
                  ) 
                  .map((key) => ({
                    日付: key,
                    名前: row[key], 
                  })), 
              }, 
            ], 
          }); 
        } 
      }); 
this.tableData
      = リスト; 
    }, 
tableclick
    () { 
      this.$emit("tableclick"); 
    }、
}

  、
 

CSS部分

.table-header { 
  text-align: center; 
} 
:
deep(.state) {
  背景色: #d3fcd3 !重要; 
} 
:
deep(.state::before) { 
  content: "今天"; 
  位置: 絶対; 
  トップ: 0; 
  左: 0; 
  背景色: #1c6e08; 
  パディング: 2px 4px; 
  色: #fff; 
} 
:
deep(.unit-bg) {
  背景色: #d9edf7; 
.blue 
:hover {
  色: #1c8fec; 
:: 
v-deep .el-table__row--level-0{ 
  background:rgba(158, 234, 139, 0.2); 
}

表示効果は次の図に示すとおりです。

やっと

読んでいただきありがとうございます。不備がございましたら、お気軽にコメント欄でご相談ください。