Vue Tables

Bootstrap Tables are designed to be opt-in due to the widespread use of tables across third-party widgets like calendars and date pickers.
Keep reading some Bootstrap Tables examples to see how these tables work.

Examples

# Name Job Position Since Salary Actions
1 Andrew Mike Develop 2013 € 99,225
2 John Doe Design 2012 € 89,241
3 Alex Mike Design 2010 € 92,144
Copy
<div>
  <el-table class="table table-striped table-flush align-items-center mb-0"
            :data="projects">
    <el-table-column label="#"
                     min-width="20px"
                     prop="active"
                     sortable
                     scope="row">
        <template v-slot="{row}">
            <div class="media align-items-center">
                
            </div>
        </template>
    </el-table-column>
    <el-table-column label="Name"
                     min-width="60px"
                     prop="name"
                     sortable>
        <template v-slot="{row}">
            <div class="media align-items-center">
              
            </div>
        </template>
    </el-table-column>
    <el-table-column label="Job Position"
                     min-width="60px"
                     prop="type"
                     sortable>
        <template v-slot="{row}">
            <div class="media align-items-center">
              
            </div>
        </template>
    </el-table-column>
    <el-table-column label="Since"
                     min-width="60px"
                     prop="quantity"
                     sortable>
        <template v-slot="{row}">
            <div class="media align-items-center">
              
            </div>
        </template>
    </el-table-column>
    <el-table-column label="Salary"
                     min-width="60px"
                     prop="price"
                     sortable>
        <template v-slot="{row}">
            <div class="media align-items-center">
              
            </div>
        </template>
    </el-table-column>
    <el-table-column label="Action"
                     min-width="60px"
                     prop="amount"
                     sortable>
        <template>
            <base-button size="sm" icon="ni ni-circle-08 pt-1" type="info"></base-button>
            <base-button size="sm" icon="ni ni-settings-gear-65 pt-1" type="success"></base-button>
            <base-button size="sm" icon="ni ni-fat-remove pt-1" type="danger"></base-button>
        </template>
    </el-table-column>
  </el-table>
</div>

<script>
export default{
  data() {
    return {
      projects:[
        {
            id: 1,
            name: 'Andrew Mike',
            type: 'Develop',
            salary: '€ 99,225',
            since: 2013

        }, {
            id: 2,
            name: 'John Doe',
            type: 'Desing',
            salary: '€ 89,241',
            since: 2012

        }, {
            id: 3,
            name: 'Alex Mike',
            type: 'Desing',
            salary: '€ 92,144',
            since: 2010

        }
      ],
      currentPage: 1
    }
  }
}
</script>

Shopping Cart Table

Product Color Size Price Qty Amount
...
Spring Jacket
by theNorthFace 		Red M €549 1
€549
Copy
<el-table style="width: 100%"
          :data="productsTable">
  <el-table-column min-width="150" align="left">
    <div slot-scope="{row}" class="img-container">
      <img :src="row.image" alt="Agenda">
    </div>
  </el-table-column>
  <el-table-column min-width="220" label="Product" align="left">
    <div class="td-name" slot-scope="{row}">
      <a href="#jacket"></a>
      <br>
      <small></small>
    </div>
  </el-table-column>
  <el-table-column min-width="80" label="Color" prop="color" align="left"></el-table-column>
  <el-table-column min-width="60" label="Size" prop="size" align="left"></el-table-column>
  <el-table-column min-width="180" label="Price" header-align="right">
    <div slot-scope="{row}" class="td-number">
      <small>€</small>
      
    </div>
  </el-table-column>
  <el-table-column min-width="180" label="Quantity" header-align="right">
    <div slot-scope="{row}" class="td-number">
      
      <div class="btn-group">
        <base-button type="info" size="sm" @click.native="decreaseQuantity(row)">
          <i class="ni ni-fat-delete"></i>
        </base-button>
        <base-button type="info" size="sm" @click.native="increaseQuantity(row)">
          <i class="ni ni-fat-add"></i>
        </base-button>
      </div>
    </div>
  </el-table-column>
  <el-table-column min-width="170" label="Amount" header-align="right">
    <div slot-scope="{row}" class="td-number">
      
    </div>
  </el-table-column>
  <el-table-column min-width="100" label="">
    <div class="td-actions">
      <base-button type="" link class="text-danger">
        <i class="ni ni-fat-remove"></i>
      </base-button>
    </div>
  </el-table-column>
</el-table>
<div class="table table-stats">
  <div class="td-total">
    Total
  </div>
  <div class="td-price">
    <small>€</small>
    
  </div>
  <div class="text-right">
    <button type="button" rel="tooltip" class="btn btn-info btn-round " data-original-title=""
            title="">
      Complete Purchase
    </button>
  </div>
</div>

<script>
  import {Table, TableColumn} from 'element-ui'

  export default {
    components: {
      [Table.name]: Table,
      [TableColumn.name]: TableColumn,
    },
    data() {
      return {
        productsTable: [
          {
            image: 'img/jacket.png',
            title: 'Monaco bees natté jacket',
            description: 'by Gucci',
            color: 'Black',
            size: 'M',
            price: 3390,
            quantity: 1,
            amount: 3390
          },
          {
            image: 'img/boots.png',
            title: 'Patent-leather ankle boots',
            description: 'by Prada',
            color: 'Black',
            size: '41',
            price: 499,
            quantity: 2,
            amount: 998
          },
          {
            image: 'img/sweater.png',
            title: 'Ophidia GG',
            description: 'by Saint Laurent',
            color: 'Red',
            size: 'M',
            price: 200,
            quantity: 1,
            amount: 200
          }
        ]
      }
    },
    computed: {
      shoppingTotal() {
        return this.productsTable.reduce((accumulator, current) => {
          return accumulator + current.amount
        }, 0)
      }
    },
    methods: {
      increaseQuantity(row) {
        row.quantity++;
        this.computeAmount(row);
      },
      decreaseQuantity(row) {
        if (row.quantity > 1) {
          row.quantity--;
          this.computeAmount(row);
        }
      },
      computeAmount(row) {
        row.amount = row.quantity * row.price;
      },
    }
  }
</script>