如何直接使用VueQuintable源码?
How to use VueQuintable source directly?
我正在尝试在我的网站上使用以下 vue table 包装器,但仅用于一页。所以我不想创建整个 vue 项目。相反,我尝试直接使用源代码。
https://vuejsexamples.com/a-high-configurable-and-flexible-table-wrapper-using-vue-and-bootstrap/
https://quintet.io/vue-quintable-demo/
我是 vue 新手。我按照一些在线示例并执行以下 3 个步骤。
第 1 步:我下载了源代码并将其放在 vue 文件夹中,然后我在我的 html 页面中包含了以下 link。
<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>
第 2 步:创建 app.js 文件
var app = new Vue({
el: '#app'
})
第 3 步:在我的 html 页面中添加以下代码
<div id="app">
</div>
现在,我不知道如何导入 VueQuintable 组件。演示页面有以下代码。它是组件代码吗?如果有人能给我一些提示我下一步应该做什么,我将不胜感激。
非常感谢。
<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>
由于我直接使用源代码,所以无法使用组件导入。
所以我需要将组件放入 app.js 文件
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>
我正在尝试在我的网站上使用以下 vue table 包装器,但仅用于一页。所以我不想创建整个 vue 项目。相反,我尝试直接使用源代码。
https://vuejsexamples.com/a-high-configurable-and-flexible-table-wrapper-using-vue-and-bootstrap/
https://quintet.io/vue-quintable-demo/
我是 vue 新手。我按照一些在线示例并执行以下 3 个步骤。
第 1 步:我下载了源代码并将其放在 vue 文件夹中,然后我在我的 html 页面中包含了以下 link。
<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>
第 2 步:创建 app.js 文件
var app = new Vue({
el: '#app'
})
第 3 步:在我的 html 页面中添加以下代码
<div id="app">
</div>
现在,我不知道如何导入 VueQuintable 组件。演示页面有以下代码。它是组件代码吗?如果有人能给我一些提示我下一步应该做什么,我将不胜感激。 非常感谢。
<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>
由于我直接使用源代码,所以无法使用组件导入。 所以我需要将组件放入 app.js 文件
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>