vue+elementui 一周排班

<template>
  <div class="scheduling">
        <el-container>
            <el-main class="scheduling-main">
               <div class="scheduling-cont1">
                    <el-table  :span-method="objectSpanMethod" :data="gridData" size="mini"  :header-cell-style="{background:'#F5F7FA',color:'#606266'}"  :border="true">
                        <el-table-column property="num" align="center" label="工号"></el-table-column>
                        <el-table-column property="name" align="center" label="名称"></el-table-column>
                        <el-table-column property="name" align="center" label="日期" class="scheduling-table-column">
                            <el-table-column property="time" align="center" label="时间" ></el-table-column>
                        </el-table-column>
                        <el-table-column property="result1" align="center" :label="'星期一 \n 2021/04/07'" show-overflow-tooltip></el-table-column>
                        <el-table-column property="result2" align="center" :label="'星期二 \n 2021/04/08'" show-overflow-tooltip></el-table-column>
                        <el-table-column property="result3" align="center" :label="'星期三 \n 2021/04/08'"></el-table-column>
                        <el-table-column property="result4" align="center" :label="'星期四 \n 2021/04/08'"></el-table-column>
                        <el-table-column property="result5" align="center" :label="'星期五 \n 2021/04/08'"></el-table-column>
                        <el-table-column property="result6" align="center" :label="'星期六 \n 2021/04/08'"></el-table-column>
                        <el-table-column property="result7" align="center" :label="'星期日 \n 2021/04/08'"></el-table-column>
                    </el-table>
                </div>
                <div class="scheduling-position-btn">
                   <img src="../../../images/svgLogo/preview2.svg" alt="" @click="centerDialogVisible = true"> <br/><br/>
                </div>
                  <el-dialog title="护士排班"  :visible.sync="centerDialogVisible" width="80%">
                       <el-table  :span-method="objectSpanMethod" :data="gridData" size="mini"  :header-cell-style="{background:'#F5F7FA',color:'#606266'}"  :border="true">
                         <el-table-column property="checked" align="center" label="选择" >
                             <template slot-scope="scope">
                                 <el-checkbox v-model="scope.row.checked"></el-checkbox>
                             </template>
                         </el-table-column>  
                        <el-table-column property="num" align="center" label="工号"></el-table-column>
                        <el-table-column property="name" align="center" label="名称"></el-table-column>
                        <el-table-column property="name" align="center" label="日期" class="scheduling-table-column">
                            <el-table-column property="time" align="center" label="时间" ></el-table-column>
                        </el-table-column>
                        <el-table-column property="result1" align="center" :label="'星期一 \n 2021/04/07'" show-overflow-tooltip></el-table-column>
                        <el-table-column property="result2" align="center" :label="'星期二 \n 2021/04/08'" show-overflow-tooltip></el-table-column>
                        <el-table-column property="result3" align="center" :label="'星期三 \n 2021/04/08'"></el-table-column>
                        <el-table-column property="result4" align="center" :label="'星期四 \n 2021/04/08'"></el-table-column>
                        <el-table-column property="result5" align="center" :label="'星期五 \n 2021/04/08'"></el-table-column>
                        <el-table-column property="result6" align="center" :label="'星期六 \n 2021/04/08'"></el-table-column>
                        <el-table-column property="result7" align="center" :label="'星期日 \n 2021/04/08'"></el-table-column>
                    </el-table>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="centerDialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
                        </span>
                  </el-dialog>
            </el-main>
        </el-container>
    </div> 
</template>
<script>
import headers from '../../commons/header.vue'
import getdata from "../../utils/getdata.js";
export default {
components:{headers},
data(){
    return {
        titles:"排班总览",
        centerDialogVisible:false,
        isCollapse:true,
        checkList:'',
         gridData:[{
            id:'1',
            num:'2313',
            time:'上午',
            name:'庐山',
            result1:'101-106',
            result2:'101-106',
            result3:'101-106',
            result4:'休',
            result5:'101-106',
            result6:'101-106',
            result7:'101-106',
            checked:false
        },{
            id:'2',
            num:'2313',
            time:'下午',
            name:'庐山',
            result1:'101-106',
            result2:'101-106',
            result3:'101-106',
            result4:'101-106',
            result5:'101-106',
            result6:'101-106',
            result7:'休',
            checked:false
        },{
            id:'3',
            num:'2313',
            time:'晚上',
            name:'庐山',
            result1:'101-106',
            result2:'101-106',
            result3:'休',
            result4:'101-106',
            result5:'101-106',
            result6:'101-106',
            result7:'101-106',
            checked:false
        },{
            id:'4',
            num:'3256',
            time:'上午',
            name:'张三',
            result1:'101-106',
            result2:'101-106',
            result3:'休',
            result4:'101-106',
            result5:'101-106',
            result6:'101-106',
            result7:'101-106',
            checked:false
        },]

    }
},
mounted() {
    this.init()
    this.associaterotas()
  },
methods:{
  associaterotas(){
      var data = {
            doctorId: 0,
            nurseId: 0,
            scheduleDate: '',
            scheduleWeek: '第一周',
            states: '',
            timeSlot: '',
        }
      getdata.associaterotas(data).then(res =>{
        console.log(res)
      })
    },
    /**
      element-table合并单元格的函数
      columnIndex 值表示要合并的列的下标，当前示例是合并前4列。
      如果你是要合并多列，需要添加对应的列号进行判断，并且添加对应的计算方法，
        和对应的计算合并列的方法。
    */
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
        // console.log(row,columnIndex)
      if (columnIndex === 0) {
        return this.ret(row, 'firstSpan')
      } else if (columnIndex === 1) {
        return this.ret(row, 'secondSpan')
      }
    },
    ret(row, obj) {

      if (row && row[obj] != 0) {
        console.log(row[obj])
        return {
          rowspan: row[obj],
          colspan: 1
        }
      } else {
        return {
          rowspan: 0,
          colspan: 0
        }
      }
    },
   init(){
       this.buildMerge(this.gridData)
   },
    /**
     *  构建合并列数据
     *  思路：遍历所有数据，将需要合并的列的内容作为key，数据id作为value，然后依次遍历获取对应的合并列的行数
     */
    buildMerge(dataList) {
      let firstObj = {},
        secondObj = {}
      let firstObjKey = '',
        secondObjKey = ''
        // 本示例合并的前四列，对应的字段分别：class、sex、age、hobby
        // 如果你需要合并其他的字段，需修改此处字段名称
      for (let i = 0, len = dataList.length; i < len; i++) {
        firstObjKey = dataList[i].num
        secondObjKey = dataList[i].name

        if (!firstObj[firstObjKey])
          firstObj[firstObjKey] = new Array(dataList[i].id)
        else {
          firstObj[firstObjKey].push(dataList[i].id)
        }
        if (!secondObj[secondObjKey])
          secondObj[secondObjKey] = new Array(dataList[i].id)
        else {
          secondObj[secondObjKey].push(dataList[i].id)
        }
      }
      this.computeFirstSpan(firstObj, secondObj)
    },
     // 计算第一列合并总数
    computeFirstSpan(firstObj, secondObj ) {
      // 遍历计算第一列合并行数
      for (let obj in firstObj) {
        // console.log(firstObj, firstObj[obj], "shhhhhhh")
        let fristData = this.gridData.filter(d => d.id === firstObj[obj][0])[0] 
        // 获取第一条数据，对其添加 'firstSpan' 属性，并设置值
        if (fristData) fristData['firstSpan'] = firstObj[obj].length
        this.computeSecondSpan(firstObj[obj], secondObj)
      }
    },
    // 计算第二列合并总数
    computeSecondSpan(classList, secondObj) {
      // 遍历计算第二列合并行数
      for (let obj in secondObj) {
        // 判断两个id数组，取其并集，并集的长度就是合并列的行数
        let secondIds = secondObj[obj].filter(val => {
          return classList.indexOf(val) > -1
        })
        let fristData = this.gridData.filter(d => d.id === secondIds[0])[0]
        // 获取第一条数据，对其添加 'secondSpan' 属性，并设置值
        if (fristData) fristData['secondSpan'] = secondIds.length
      }
    },
}
}

</script>

<style lang="less">
/*实现表格头数据换行*/
.el-table .cell {
    /*text-align: center;*/
    white-space: pre-line !important;/*保留换行符*/
}
.scheduling{
}
.el-header{
    padding: 0;
}
.scheduling-main{
    border: 1px solid 797979;
    flex: 1;
    .scheduling-cont1{
        padding-bottom: 15px;
        .scheduling-cont1-img{
            width: 50px;
            height: 50px;
            display: inline-block;
            float: right;
            margin-top: -9px;
        }
    }
}
// 编辑
.scheduling-position-btn{
    position: fixed;
    right: 35px;
    bottom: 90px;
    img{width: 40px;height: 40px;}
}
// 表头添加斜线
//css
// 不要设置 scope 
.el-table thead.is-group th {
  background: none;
  padding: 0px;
}
.el-table thead.is-group tr:first-of-type th:first-of-type,
.el-table thead.is-group tr:last-of-type th:first-of-type {
//   background: #ffffff !important;
}
.el-table thead.is-group tr:first-of-type th:nth-of-type(3) {
  border-bottom: none;
}
.el-table thead.is-group tr:first-of-type th:nth-of-type(3) div.cell {
  text-align: right;
}
.el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
  text-align: left;
}
.el-table thead.is-group tr:first-of-type th:nth-of-type(3):before {
  content: "";
  position: absolute;
  width: 1px;
  // height: 55px;
  height: 70px;  //自行调整
  top: 0;
  left: 0;
  background-color: grey;
  opacity: 0.2;
  display: block;
  transform: rotate(-68deg);
//   transform: rotate(-56deg);  //自行调整
  -webkit-transform-origin: top;
  transform-origin: top;
}
.el-table thead.is-group tr:last-of-type th:first-of-type:before {
  content: "";
  position: absolute;
  width: 1px;
//   height: 60px;
  height: 80px;  //自行调整
  bottom: 0;
  right: 0;
  background-color: grey;
  opacity: 0.2;
  display: block;
  // transform: rotate(-45deg);  //自行调整
  transform: rotate(-70deg);
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
}
</style>