I am trying to use the following vue table wrapper on my website but for one page only. So I don't want to create the whole vue project. Instead, I try to use the source code directly.
I am new to vue. I follow some example online and do following 3 step.
Step 1 : I downloaded the source code and place in the vue folder, then I included following link in my html page.
<script type="text/javascript" src="vue/vue.min.js"></script>
<script type="text/javascript" src="vue/vue-quintable.umd.min.js"></script>
<link rel="stylesheet" href="vue/vue-quintable.css"></link>
Step 2 : Create the app.js file
var app = new Vue({
el: '#app'
})
Step 3: add the following code in my html page
<div id="app">
</div>
Now, I don't know how to import VueQuintable component. The demo page have following code. Is it a component code? I would be appreciate if anyone can give a some tips what I should do next. Thank you very much.
<template>
<VueQuintable :sort-order="sortOrder" :config="config" :rows="rows"></VueQuintable>
</template>
<script>
import VueQuintable from "../components/VueQuintable.vue"
import Chance from "chance";
export default {
components:{
VueQuintable
},
data() {
return {
config: {
columns: [
{
headline: "Name",
}, {
headline: "Age",
sort:true
}, {
headline: "Birth Place",
}, {
headline: "Job",
sort:true
}
],
multiSort:true,
multiSortSelect:true,
pageSort:true,
pageSortSelect:true,
pagination:5,
search:true,
},
sortOrder:[{
index:1,
asc:false,
}]
}
},
computed:{
rows(){
let count = 30;
const rows = [];
const chance = new Chance();
for(let i = 0; i < count; i ){
const randSortValue = Math.ceil(Math.random() * 10);
rows.push([
{
text:chance.name({ nationality: 'en' })
},
{
text:chance.age()
},
{
text:chance.city()
},
{
html:"<span class\"mr-2\">" chance.profession() "</span><em>" "[" randSortValue "]</em>",
sortValue: randSortValue
},
]);
}
return rows;
}
}
}
</script>CodePudding user response：
Due to i use the source directly, I can't use import for the component. So I need to put the component inside the app.js file
Vue.component('vuequintable', {
data() {
return {
config: {
columns: [
{
headline: "Name",
}, {
headline: "Age",
sort:true
}, {
headline: "Birth Place",
}, {
headline: "Job",
sort:true
}
],
multiSort:true,
multiSortSelect:true,
pageSort:true,
pageSortSelect:true,
pagination:5,
search:true,
},
sortOrder:[{
index:1,
asc:false,
}],
chance:[{name : "aa",
age : 2,
city :"hk",
profession :"kk"
},{name : "bb",
age : 3,
city :"hk",
profession :"kk"
}],
}
},
computed:{
rows(){
let count = 2;
const rows = [];
//const chance = new Chance();
for(let i = 0; i < count; i ){
//const randSortValue = Math.ceil(Math.random() * 10);
rows.push([
{
text:this.chance[i].name
},
{
text:this.chance[i].age
},
{
text:this.chance[i].city
},
{
text:this.chance[i].profession
},
]);
}
return rows;
}
},
template: `<VueQuintable :sort-order="sortOrder" :config="config" :rows="rows"></VueQuintable>`
});
Vue.config.devtools = true
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="./dist/vue-quintable.css"></link>
<div id="app">
<vuequintable></vuequintable>
</div>
<script type="text/javascript" src="./dist/vue.min.js"></script>
<script type="text/javascript" src="./dist/vue-quintable.umd.min.js"></script>