SHARE
TWEET

Untitled

a guest Jul 18th, 2019 68 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.   <el-footer class="estilo-footer">
  3.     <el-row class="estilo-row1">
  4.       <el-col :xs="18" :sm="20" :md="21" :lg="22" :xl="22"><div class="grid-content bg-purple"><h2>SLIDE SHOW</h2></div></el-col>
  5.       <el-col :xs="6" :sm="4" :md="3" :lg="2" :xl="2"><div class="estilo-menu-parceiros grid-content bg-purple"><el-button type=primary>Adicionar</el-button></div></el-col>
  6.     </el-row>
  7.       <el-table
  8.         :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
  9.         style="width: 100%">
  10.         <el-table-column
  11.           label="Título"
  12.           prop="titulo">
  13.         </el-table-column>
  14.         <el-table-column
  15.           label="Subtítulo"
  16.           prop="subtitulo">
  17.         </el-table-column>
  18.         <el-table-column
  19.           label="Foto"
  20.           prop="foto">
  21.         </el-table-column>
  22.         <el-table-column
  23.           align="right">
  24.           <template slot="header scope">
  25.             <el-input
  26.               v-model="search"
  27.               size="mini"
  28.               placeholder="Type to search"/>
  29.           </template>
  30.           <template slot-scope="scope">
  31.             <el-button
  32.               size="mini"
  33.               @click="handleEdit(scope.$index, scope.row, tableData)">Editar</el-button>
  34.             <el-button
  35.               size="mini"
  36.               type="danger"
  37.               @click.native.prevent="handleDelete(scope.$index, tableData)">Deletar</el-button>
  38.           </template>
  39.         </el-table-column>
  40.       </el-table>
  41.   </el-footer>
  42. </template>
  43.  
  44. <style>
  45.   .estilo-footer{
  46.     margin: 60px;
  47.   }
  48.  
  49.   .estilo-row1{
  50.     margin-bottom: 20px;
  51.   }
  52.  
  53.   .estilo-menu-parceiros{
  54.     text-align: center;
  55.   }
  56.  
  57. </style>
  58.  
  59. <script>
  60.  
  61.   export default {
  62.     data() {
  63.       return {
  64.         tableData: [{
  65.           titulo: '2016-05-03',
  66.           subtitulo: 'Tom',
  67.           foto: 'No. 189, Grove St, Los Angeles'
  68.         }, {
  69.           titulo: '2016-05-02',
  70.           subtitulo: 'joseph',
  71.           foto: 'No. 189, Grove St, Los Angeles'
  72.         }, {
  73.           titulo: '2016-05-02',
  74.           subtitulo: 'Maria',
  75.           foto: 'No. 189, Grove St, Los Angeles'
  76.         }, {
  77.           titulo: '2016-05-02',
  78.           subtitulo: 'Pedro',
  79.           foto: 'No. 189, Grove St, Los Angeles'
  80.         }],
  81.         search: '',
  82.       }
  83.     },
  84.     methods: {
  85.       handleEdit(index, row, tableData) {
  86.         tableData[index].titulo = "kkkk"
  87.        
  88.       },
  89.       handleDelete(index, rows) {
  90.         rows.splice(index,1);
  91.       }
  92.     },
  93.   }
  94. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top