Vue

by mavrin_88

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://unpkg.com/[email protected]/dist/axios.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css">
<div id="app">

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <table class="table table-bordered datatable datatable-User table-collection">
                    <tbody>
                        <tr>
                            <td class="pt-2 pb-2 col-3 text-center h3">
                            	{{ this.monthNames[new Date(this.year, this.month).getMonth() - 1] }}, {{ this.year }}
                            </td>
                            <td  v-for="n in dates" :style="[n.getDay() === 0 || n.getDay() === 6 ? { 'background-color': 'red', color: 'white' } : { color: 'black' },]" class="pt-2 pb-2 text-center">{{ n.getDate() }}
                            </td>
                        </tr>

                                <template v-for="val in test[0].schedule_hall">
                                    <tr>
                                        <td class="bg-primary text-white">{{ val.time }}:00 - {{ val.group.name }}
                                        </td>
                                    </tr>
                                    <template v-for="vals in val.group.children">
                                        {{ computedUserData([vals]) }}
                                        <tr v-for="user in selectedUsers" :key="user.id">
                                            <td class="pt-2 pb-2 col-3">
                                                <span class="ml-3">{{ user.surname }}</span>
                                                <span class="ml-1">{{ user.name }}</span>
                                            </td>
                                            <td v-for="(n, index) in...

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

new Vue({
  el: "#app",
  data: {

    		selectedUsers: [],
    		monthNames: [
	    		"Январь", "Февраль", "Март", "Апрель", "Май", "Июнь",
	      		"Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"
    		],
    		n: 8,
    		year: 2020,
    		month: 6,
    		row: null,
    		rowid: null,
        
        test: [
				{
    			"id":1,
    			"branch_id":1,
    			"name":"Большой зал",
    			"schedule_hall":[{
    				"id":1,
    				"hall_id":1,
    				"group_id":1,
    				"time":8,
    				"day":1,
    				"group":{
    					"id":1,
    					"name":"Первая группа",
    					"programm_id":1,
    					"children":[
    						{
    							"id":14,
    							"child_surname":"Владимиров",
    							"child_name":"Павел",
    							"group_id":1,
    							"journal":[
		    						{"id":1,"base_id":14,"day":16,},
		    						{"id":2,"base_id":14,"day":15,"icon":"fa fa-times-circle text-alert",},
		    						{"id":132,"base_id":14,"day":27,"icon":"fa fa-circle text-warning",},
		    						{"id":133,"base_id":14,"day":5,"icon":"fa fa-circle text-warning"},
		    						{"id":135,"base_id":14,"day":30,"icon":"fa fa-circle text-warning"},
		    						{"id":136,"base_id":14,"day":11,"icon":"fa fa-circle text-warning"},
		    						{"id":147,"base_id":14,"day":28,"icon":"fa fa-circle text-warning"}
    						]},
    						{
    							"id":15,
    							"child_surname":"Иванов",
    							"child_name":"Сергей",
    							"group_id":1,
    							"journal":[
    								{"id":156,"base_id":15,"day":30,"icon":"fa fa-circle text-warning"}
    							]}
    						,]
    					}
    				}
    			]}
    		],
  },
     computed: {
         computedMans() {
      return this.test.schedule_hall[0].group.map(g => {
        return g.children.map(item => {
          return {
            id: item.id,
            surname: item.child_surname,
            name: item.child_name,
            journal: item.journal
          }
        })
      })
    },
   ...