element 复杂表格渲染（1）

使用element table 渲染 课程表（使用色块展示）

组件封装详情

<el-row>
   <el-col :span="24">
   	
      <el-table ref="table" :data="tableData" border :cell-style="cellStyle" :header-cell-style="headCellStyle">
      	
          <el-table-column prop="classroom" width="120px" align="center" fixed="left">
              <template slot="header" >
                    <span>培训室span>
              template>
          el-table-column>
          
          <el-table-column align="center" v-for="(ite,i) in tableHead"  :key="ite.id+Date.now().toString()"> 
          	  
              <template  slot="header" >
                  <div style="display:flex;flex-direction: column;padding:0">
                       <span style="border-bottom: 1px solid #ebeef5;">{{ite.day}}span>
                       <div style="display:flex;margin:0;padding:0" >
                            <span v-for="(it,ind) in ite.children" :style="it.tit==='上午'?'padding-right:2px;width:49%;border-right: 1px solid #ebeef5;':'padding-left:2px;width:49%'" :key="ite.id+''+ind">{{it.tit}}span>
                       div>
                  div>
              template>
              
			  <template slot-scope="{row}">
					<div class="span_box">
						
                        <span @click="handleView(row.list[i].am,row.list[i].amId)" style="cursor: pointer;float:left" v-if="[0,-1,-2,1].includes(row.list[i].am)&&row.list[i].am!==-2" :class="getClass(row.list[i].am)" >span> 
                        <span @click="handleView(row.list[i].pm,row.list[i].pmId)" style="cursor: pointer;float:right;border-left: 1px dashed #ccc" v-if="[0,-1,-2,1].includes(row.list[i].pm)&&row.list[i].pm!==-2" :class="getClass(row.list[i].pm)" >span> 
                   	div>
               template>
         el-table-column>
  	el-table>
  	
	<teos-pagination :page="paginationConfig" @change="pageChange" style="margin-top:10px">teos-pagination>
	
     <div class="ext">
         <p style="display: flex; justify-content: center; align-items: center;">
            注：
            <span style="color: #3399ff;display: flex; justify-content: center; align-items: center;"><i class="col" style="background-color: #3399ff;">i>已被预订span>
            <span style="color: #ff8247;display: flex; justify-content: center; align-items: center;"><i class="col" style="background-color: #ff8247;">i>正在使用span>
            <span style="color: #a0a0a0;display: flex; justify-content: center; align-items: center;"><i class="col" style="background-color: #a0a0a0;">i>历史排课span>
         p> 
      div>
	el-col>
el-row>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

逻辑部分

<script>
export default {
    components:{
        teosPagination:()=>import('@/modules/teos/components/teos-pagination/index.vue'),
    },
    computed:{
        tableHead(){
            let year,month
            year = new Date(this.formData.beginDate).getFullYear()
            month = new Date(this.formData.beginDate).getMonth()+1
            let dates = (new Date(year,month,0)).getDate()
            // console.log(dates)
            let dayList = []
            for(let i=1;i<=dates;i++){
                let obj = {}
                obj.day = i
                obj.id = i
                obj.children=[{tit:'上午',prop:'am'},{tit:'下午',prop:'pm'}]
                dayList.push(obj)
            }
            return dayList
        },
    },
    data(){
        return{
            paginationConfig: {
                total: 0,
                pageSize: 100,
                pageSizes:  [100],
                layout: 'total, sizes, prev, pager, next, jumper',
                currentPage: 1
            },
            trainingRoomList:[],
            tableData:[],
        }
    },
    created(){
        this.getClassroomSelect()
    },
    mounted(){
        this.$nextTick(()=>{
            this.handleSearch()
            // console.log('tableData',this.tableData)
        })
    },
    methods:{
        getClass(v,index){
            // console.log('...',JSON.parse(JSON.stringify(v)),index)
            let sty = ''
            switch(v){
                case 1 : sty = 'blue';
                break;
                case 0 : sty = 'orage';
                break;
                case -1 : sty = 'grey';
                break;
            }
            return sty+' span_item'
        },
        cellStyle({row,column,rowIndex,columnIndex}){
            // console.log(row,rowIndex,column,columnIndex)
            if(columnIndex===0){
                return 'background-color: #fafafa;height:50px'
            }
        },
        headCellStyle({row,rowIndex}){
            if(rowIndex===0)return 'height:50px'
        },
        pageChange(type, val) {
            this.paginationConfig[type] = val
        },
        async getClassroomSelect(){
            const res = await post(api.xxx,{})
            // console.log('ccs',res)
            this.trainingRoomList = res.data
        },
        //查看 || 编辑
        handleView(flag,id){
            let row ={
                flag,
                id
            }
            //此处我使用动态组件渲染
            this.$$dialogOpen('componentEditDialog', {
                row,
                flag:'edit',
                trainingRoomList:this.trainingRoomList,
                title: '课程',
                onSubmit: () => {
                    this.$message.success('操作成功')
                    this.handleSearch()
                }
            })
        },
        //init data
        init(arr,size){
            size = parseInt(size)
            if(isNaN(size)||size<1||size>=arr.length)return [arr]
            let newArr = []
            for(let i=0;i< arr.length;i+=size){
                newArr.push(arr.slice(i,i+size))
            }
            return newArr
        },
        //查询
        async handleSearch(){
            const {pageSize,currentPage:curPage}=this.paginationConfig
            const data = {
                pageSize,
                curPage
            }
            this.tableData = []
            const res = await post(api.xxxx,{data})
            // console.log('list',res)
            if(res.code==='0'){
                const {records:data,total} = res.data
                this.paginationConfig.total = total
                this.tableData = data
                // console.log('data',data,this.tableHead)
                
            }else return this.$message.error(res.msg)
        }  
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

效果预览