componente.vue

<template>
    <div id="app">
        <h2>Avaliações - {{ bimestre }}º Bimestre</h2>
        <el-tabs type="border-card">
            <el-tab-pane :label="tab.text" v-for="tab in tabs" v-bind:key="tab.id">
                <a class="nav-link" :class="{'active': tab.id === selected}" @click="select(tab)">{{tab.text}}</a>
                <!-- <div v-if="tab.text === 'Arte'"> -->
                <div>
                    <el-table 
                    :data="TableArt"
                    :height="tabheight"
                    style="width: 100%"
                    visibled=false>
                        <el-table-column v-for="col in cols1" :prop="col.prop" :align="col.align" :label="col.label" :width="col.width" v-bind:key="col.id">
                        </el-table-column>

                        <el-table-column :prop="cols2.avaliacao" :align="cols2.align" :label="cols2.label" :width="cols2.width" v-bind:key="cols2.id">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.avaliacao"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column :prop="cols2.estudos_orientados" :align="cols2.align" :label="cols2.label" :width="cols2.width" v-bind:key="cols2.id">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.estudos_orientados"></el-input>
                            </template>
                        </el-table-column>

                        <el-table-column :prop="cols2.estudos_orientados" :align="cols2.align" :label="cols2.label" :width="cols2.width" v-bind:key="cols2.id">
                            <template slot-scope="scope">
                                <span> {{ scope.row.nota_final }}</span>
                            </template>
                        </el-table-column>

                        <el-table-column :prop="cols2.status" :align="cols2.align" :label="cols2.label" :width="cols2.width" v-bind:key="cols2.id">
                            <template slot-scope="scope">
                                <el-button type="success" icon="el-icon-check" circle v-if="scope.row.nota_final"></el-button>
                                <el-button type="danger" icon="el-icon-close" size="mini" circle v-else></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<style scoped>
    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;
    }
    .nav-link {
        cursor: pointer;
    }
</style>

<script>
    import axios from 'axios';
    export default {
        data: () => ({
            selected: '2',
            tabheight: '200',
            bimestre: '1',
            tabs: [
                    { id: '0', text: "Arte", component: 'TableArt'},
                    { id: '1', text: "Ciências", component: 'TableCie'},
                    { id: '2', text: "Educação Física", component: 'TableEF'},
                    { id: '3', text: "Ensino Religioso", component: 'TableER'},
                    { id: '4', text: "Geografia", component: 'TableGeo'},
                    { id: '5', text: "História", component: 'TableHist'},
                    { id: '6', text: "Língua Inglesa", component: 'TableLI'},
                    { id: '7', text: "Língua Portuguesa", component: 'TableLP'},
                    { id: '8', text: "Matemática", component: 'TableMat'},
                    { id: '9', text: "Outros Projetos", component: 'TableOP'},
            ],
            cols1: [
                    {"prop":"id", "label":"id", "width":"50", "align":"center"},
                    {"prop":"estudante_numero", "label":"Núm.", "align":"center"},
                    {"prop":"estudante_nome", "label":"Estudante", "align":"left"},
            ],
            cols2: [
                    {"prop":"avaliacao", "label":"Avaliação", "align":"center"},
                    {"prop":"estudos_orientados", "label":"Estudos Orientados", "align":"center"},
                    {"prop":"nota_final", "label":"Nota Final", "align":"center"},
                    {"prop":"status", "label":"Status", "align":"center"},
            ],
            TableArt: [{
                    id: '1',
                    estudante_numero: '01',
                    estudante_nome: 'Tom1',
                    avaliacao: '1',
                    estudos_orientados: '2',
                    nota_final: '3',
                }, {
                    id: '2',
                    estudante_numero: '02', 
                    estudante_nome: 'Tom2',
                    avaliacao: '4',
                    estudos_orientados: '5',
                    nota_final: '6',
                }, {
                    id: '3',
                    estudante_numero: '03',
                    estudante_nome: 'Tom3',
                    avaliacao: '',
                    estudos_orientados: '',
                    nota_final: '',
                }, {
                    id: '4',
                    estudante_numero: '04',
                    estudante_nome: 'Tom4',
                    avaliacao: '',
                    estudos_orientados: '',
                    nota_final: '',
                }, {
                    id: '5',
                    estudante_numero: '05',
                    estudante_nome: 'Tom5',
                    avaliacao: '',
                    estudos_orientados: '',
                    nota_final: '',
                }, {
                    id: '6',
                    estudante_numero: '06',
                    estudante_nome: 'Tom6',
                    avaliacao: '',
                    estudos_orientados: '',
                    nota_final: '',
                }, {
                    id: '7',
                    estudante_numero: '07',
                    estudante_nome: 'Tom7',
                    address: '',
                    estudos_orientados: '',
                    nota_final: '',
            }],
            TableGeo: [{
                    id: '1',
                    estudante_numero: '01',
                    estudante_nome: 'Tom1',
                    avaliacao: '1',
                    estudos_orientados: '2',
                    nota_final: '3',
                }, {
                    id: '2',
                    estudante_numero: '02', 
                    estudante_nome: 'Tom2',
                    avaliacao: '2',
                    estudos_orientados: '',
                    nota_final: '',
                }, {
                    id: '3',
                    estudante_numero: '03',
                    estudante_nome: 'Tom3',
                    avaliacao: '',
                    estudos_orientados: '',
                    nota_final: '',
                }, {
                    id: '4',
                    estudante_numero: '04',
                    estudante_nome: 'Tom4',
                    avaliacao: '',
                    estudos_orientados: '',
                    nota_final: '',
                }, {
                    id: '5',
                    estudante_numero: '05',
                    estudante_nome: 'Tom5',
                    avaliacao: '',
                    estudos_orientados: '',
                    nota_final: '',
                }, {
                    id: '6',
                    estudante_numero: '06',
                    estudante_nome: 'Tom6',
                    avaliacao: '',
                    estudos_orientados: '',
                    nota_final: '',
                }, {
                    id: '7',
                    estudante_numero: '07',
                    estudante_nome: 'Tom7',
                    address: '',
                    estudos_orientados: '',
                    nota_final: '',
            }],
        }),
        methods: {
            select: function(tab){ 
                this.selected = tabs.id
            }
        },
        mounted() {
            this.tabheight = window.innerHeight - 200
        },
        computed: {
            'scope.row.nota_final': function () {
                if ( scope.row.avaliacao >= scope.row.estudos_orientados ) {
                    scope.row.avaliacao = scope.row.avaliacao
                }
                else {
                    scope.row.avaliacao = scope.row.estudos_orientados
                }
                return this.firstName + ' ' + this.lastName
            },
        }
    }
</script>