Vue

Exemplo de Tabela Utilizando VueJS

by WILLIAM CORREA

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<div id="app">
  <css-h1 v-bind:colunas="colunas" v-bind:registros="registros">
  </css-h1>
</div>

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

function payload(){
  return JSON.parse(`{
  "columns": {
    "codigo": "Código",
    "nome": "Nome",
    "email": "E-mail"
  },
  "records": [
    {
      "codigo": "01",
      "nome": "Claudney Sarti Sessa",
      "email": "[email protected]"
    },
    {
      "codigo": "02",
      "nome": "Juliana Maria Castor Gomes Sessa",
      "email": "[email protected]"
    }
  ]
}`);
}

Vue.component('css-h1', {
  props: ['colunas','registros'],
  template: '<table class="table table-hover table-striped table-bordered">' +
  '<thead>' +
  '  <tr>' +
  '    <th v-for="(coluna, key) in colunas">{{ coluna }}</th>' +
  '  </tr>' +
  '</thead>' +
  '<tbody>' +
  '  <tr v-for="(registro, index) in registros">' +
  '    <td v-for="(coluna, key) in colunas"">{{ registro[key]}}</td>' +
  '  </tr>' +
  '</tbody>' +
  '</table>'
});

const app = new Vue({
  el: '#app',
  data: {
    meuTitulo: "Este é um título",
    colunas: {},
    registros: []
  }
});
const properties = payload()
app.colunas = properties.columns
app.registros = properties.records