مشاهده در GitHub
مرورگر Bootstrap Table
بیاموزید که چگونه از کامپونент Vue Bootstrap Table در پروژه خود با استفاده از مرورگر استفاده کنید.
در این صفحه
JavaScript VueJS
علاوه بر فایلهایی که مقدمه سریع ذکر میکند، همچنین نیاز دارید فایل کامپونент vue ما را شامل کنید.
<script src="https://gcore.jsdelivr.net/npm/bootstrap-table@1.26.0/dist/bootstrap-table-vue.umd.js"></script>استفاده
<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: 'Item ID',
field: 'id'
},
{
field: 'name',
title: 'Item Name'
},
{
field: 'price',
title: 'Item Price'
},
{
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: 'Item 0',
price: '$0'
},
{
id: 1,
name: 'Item 1',
price: '$1'
},
{
id: 2,
name: 'Item 2',
price: '$2'
},
{
id: 3,
name: 'Item 3',
price: '$3'
},
{
id: 4,
name: 'Item 4',
price: '$4'
},
{
id: 5,
name: 'Item 5',
price: '$5'
}
])
const options = ref({
search: true,
showColumns: true
})
return {
columns,
data,
options
}
}
})
app.component('BootstrapTable', BootstrapTable)
app.mount('#app')
</script>الگوی شروع
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, 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: 'Item ID',
field: 'id'
},
{
field: 'name',
title: 'Item Name'
},
{
field: 'price',
title: 'Item Price'
},
{
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: 'Item 0',
price: '$0'
},
{
id: 1,
name: 'Item 1',
price: '$1'
},
{
id: 2,
name: 'Item 2',
price: '$2'
},
{
id: 3,
name: 'Item 3',
price: '$3'
},
{
id: 4,
name: 'Item 4',
price: '$4'
},
{
id: 5,
name: 'Item 5',
price: '$5'
}
])
const options = ref({
search: true,
showColumns: true
})
return {
columns,
data,
options
}
}
})
app.component('BootstrapTable', BootstrapTable)
app.mount('#app')
</script>
</body>
</html>