我正在嘗試在我的網站上使用以下 vue 表包裝器，但僅用于一頁。所以我不想創建整個vue專案。相反，我嘗試直接使用源代碼。
我是 vue 的新手。我遵循一些在線示例并執行以下 3 步。
第 1 步：我下載了源代碼并將其放在 vue 檔案夾中，然后在我的 html 頁面中包含以下鏈接。
<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'
})
第三步：在我的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>uj5u.com熱心網友回復：
由于我直接使用源代碼，我無法對組件使用匯入。所以我需要把組件放在 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/333903.html