Bootstrap Table Navigateur

Apprenez à utiliser le composant Bootstrap Table Vue dans votre projet directement dans le navigateur.

Sur cette page

JavaScript VueJS

En plus des fichiers mentionnés dans le Guide de démarrage rapide, vous devez également inclure notre fichier de composant Vue.

<script src="https://gcore.jsdelivr.net/npm/bootstrap-table@1.26.0/dist/bootstrap-table-vue.umd.js"></script>

Utilisation

<div id="app">
  <bootstrap-table :columns="columns" :data="data" :options="options"></bootstrap-table>
</div>

<script>
  const { createApp, ref } = Vue
  const app = createApp({
    setup () {
      const columns = ref([
        {
          field: 'state',
          checkbox: true
        },
        {
          title: 'ID de l\'élément',
          field: 'id'
        },
        {
          field: 'name',
          title: 'Nom de l\'élément'
        },
        {
          field: 'price',
          title: 'Prix de l\'élément'
        },
        {
          field: 'action',
          title: 'Actions',
          align: 'center',
          formatter () {
            return '<a href="javascript:" class="like"><i class="fa fa-star"></i></a>'
          },
          events: {
            'click .like' (e, value, row) {
              alert(JSON.stringify(row))
            }
          }
        }
      ])
      const data = ref([
        {
          id: 0,
          name: 'Élément 0',
          price: '$0'
        },
        {
          id: 1,
          name: 'Élément 1',
          price: '$1'
        },
        {
          id: 2,
          name: 'Élément 2',
          price: '$2'
        },
        {
          id: 3,
          name: 'Élément 3',
          price: '$3'
        },
        {
          id: 4,
          name: 'Élément 4',
          price: '$4'
        },
        {
          id: 5,
          name: 'Élément 5',
          price: '$5'
        }
      ])
      const options = ref({
        search: true,
        showColumns: true
      })

      return {
        columns,
        data,
        options
      }
    }
  })

  app.component('BootstrapTable', BootstrapTable)
  app.mount('#app')
</script>

Modèle de démarrage

<!doctype html>
<html lang="fr">
  <head>
    <!-- Balises meta requises -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Bonjour, Bootstrap Table !</title>

    <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/bootstrap-table@1.26.0/dist/bootstrap-table.min.css">
  </head>
  <body>
    <div id="app">
      <bootstrap-table :columns="columns" :data="data" :options="options"></bootstrap-table>
    </div>

    <script src="https://gcore.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
    <script src="https://gcore.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://gcore.jsdelivr.net/npm/vue@2.7.16/dist/vue.min.js"></script>
    <script src="https://gcore.jsdelivr.net/npm/bootstrap-table@1.26.0/dist/bootstrap-table.min.js"></script>
    <script src="https://gcore.jsdelivr.net/npm/bootstrap-table@1.26.0/dist/bootstrap-table-vue.umd.js"></script>
    <script>
      const { createApp, ref } = Vue
      const app = createApp({
        setup () {
          const columns = ref([
            {
              field: 'state',
              checkbox: true
            },
            {
              title: 'ID de l\'élément',
              field: 'id'
            },
            {
              field: 'name',
              title: 'Nom de l\'élément'
            },
            {
              field: 'price',
              title: 'Prix de l\'élément'
            },
            {
              field: 'action',
              title: 'Actions',
              align: 'center',
              formatter () {
                return '<a href="javascript:" class="like"><i class="fa fa-star"></i></a>'
              },
              events: {
                'click .like' (e, value, row) {
                  alert(JSON.stringify(row))
                }
              }
            }
          ])
          const data = ref([
            {
              id: 0,
              name: 'Élément 0',
              price: '$0'
            },
            {
              id: 1,
              name: 'Élément 1',
              price: '$1'
            },
            {
              id: 2,
              name: 'Élément 2',
              price: '$2'
            },
            {
              id: 3,
              name: 'Élément 3',
              price: '$3'
            },
            {
              id: 4,
              name: 'Élément 4',
              price: '$4'
            },
            {
              id: 5,
              name: 'Élément 5',
              price: '$5'
            }
          ])
          const options = ref({
            search: true,
            showColumns: true
          })

          return {
            columns,
            data,
            options
          }
        }
      })

      app.component('BootstrapTable', BootstrapTable)
      app.mount('#app')
    </script>
  </body>
</html>