[这里,我在VueJs项目中使用制表符设置了一个表。我已经从http://tabulator.info/docs/4.1/frameworks#vue中遵循了VueJ中制表符设置的说明。我已从数据库中获取数据。我可以从数据库中看到带有数据的表。但是,由于某种原因,我看不到我的保存按钮。
这是我的代码:
<template>
<div ref="table">
<div class="my-2">
' <v-btn color="Save">Primary</v-btn>
</div>
</div>
</template>
<script>
var Tabulator = require('tabulator-tables')
export default {
name: 'Location',
data: function () {
return {
tabulator: null, // variable to hold your table
location: [] // data for table to display
}
},
watch: {
// update table if data changes
location: {
handler: function (newData) {
this.tabulator.replaceData(newData)
},
deep: true
}
},
created: function () {
console.log('Location', this.$refs)
this.initialize()
},
methods: {
initialize () {
axios.get('/api/location')
.then(response => this.location = response.data.location)
}
},
mounted () {
// instantiate Tabulator when element is mounted
this.tabulator = new Tabulator(this.$refs.table, {
data: this.location,
layout:"fitDataStretch",
addRowPos:"bottom",
movableColumns:true,
// link data to table
columns: [
{title: 'Code', field: 'code', sorter: 'string',width: 100, editor: 'input' , validator: "required"},
{title: 'Name', field: 'name', sorter: 'string', width: 200 , validator: "required",editor:"autocomplete", editorParams:{allowEmpty:true, showListOnEmpty:true, values:true}},
{title: 'Under', field: 'under', sorter: 'string', width: 200, editor: 'input' , validator: "required"},
{title: 'Status', field: 'status', sorter: 'string',width: 100, editor: 'input' , validator: "required"},
{title: 'Description', field: 'description', sorter: 'string', width: 200, editor: 'input' , validator: "required"},
{title: 'Depth', field: 'depth', sorter: 'string', width: 100, editor: 'input' , validator: "required"}
]
});
},
}
</script>
<style scoped>
</style>
Tabulator包将替换div中用于呈现它的所有内容,其中还包括您的按钮。因此,您可能想使用以下模板代码:-
<template>
<div class="table-wrapper>
<div ref="table">
</div>
<div class="my-2">
<v-btn color="Save">Primary</v-btn>
</div>
</div>