Jun 22, 2020
0
Level 1
Laravel + Vue.js add one field for router-link in Bootstrap Table filed
My table file
<template>
<div>
<div id="toolbar" v-if="$gate.isAdmin()">
</div>
<bootstrap-table :columns="myColumns" :data="myPosts.data" :options="myOptions"/>
</div>
</template>
This is my script part import BootstrapTable from 'bootstrap-table/dist/bootstrap-table-vue.min.js';
export default {
//props: ['posts'],
components: {
'bootstrap-table': BootstrapTable
},
data() {
return {
editmode: false,
users: [],
mySelections: [],
form: new Form({
id: '',
filename: '',
filedisplayname: '',
fileversion: '',
privilege: '',
remarks: '',
user_id:'',
file:null,
}),
myPosts: [],
myOptions: {
search: true,
pagination: true,
showColumns: true,
showPrint: true,
showExport: true,
filterControl: true,
clickToSelect: true,
idField: 'id',
selectItemName: 'id',
toolbar: '#toolbar',
classes: "table table-sm table-bordered table-hover table-striped"
},
myColumns: [
{ field: 'state', checkbox: true },
{field: 'filename', title: 'File Name', sortable: true, filterControl: 'input'},
{field: 'filedisplayname', title: 'File Display', sortable: true, filterControl: 'input'},
{
field: 'pdfread',
title: 'User ID',
sortable: true,
filterControl: 'input',
formatter: function (e, value, row) {
var pdfread = '1';
for (var index = 0; index < value.length; index++) {
pdfread += value.pdfread[index].filename + ' ' + value.pdfread[index].user_id;
// Only show a comma if it's not the last one in the loop
if (index < (value.length - 1)) {
pdfread += ', ';
}
}
return pdfread;
}
},
{
field: 'action',
title: 'Actions',
align: 'center',
width: '160px',
clickToSelect: false,
formatter: function (e, value, row) {
return '<button class="btn btn-sm btn-info mr-1
showto">'+value.pdfread_count+'</button>'+
'<button class="btn btn-sm btn-info mr-1 show"><i class="fas fa-eye"></i></button>' +
'<button class="btn btn-sm btn-warning mr-1 edit"><i class="fas fa-edit"></i></button>' +
'<button class="btn btn-sm btn-danger mr-1 destroy"><i class="fas fa-trash"></i>
</button>'
},
events: {
'click .show': (e, value, row) =>{
return window.location.assign('pdfreads/' + row.id)
},
'click .edit': (e, value, row)=> {
//return window.location.assign('/posts/' + row.id + '/edit')
this.editModal(row);
},
'click .destroy': (e, value, row) =>{
this.deleteData(row.id);
},
'click .showto': (e, value, row) =>{
this.deatilsDisplay(row.id);
//return window.location.assign('/user/' + row.id)
}
}
}
]
}
},
created() {
//this.loadUsers();
//this.myPosts = this.users;
console.log("not bad");
},
mounted: function () {
this.loadData();
},
methods: {
loadData() {
axios.get("api/ispack").then(response => {
this.myPosts = response.data
//console.log(this.myPosts);
//alert("loaded");
})
.catch(function (error) {
console.log(666);
})
},
deatilsDisplay($id){
axios.get("api/ispack/"+$id).then(response => {
this.myPosts = response.data
console.log(this.myPosts);
//alert("loaded");
})
.catch(function (error) {
console.log(666);
})
},
}
}
Please or to participate in this conversation.