11-main/plop-templates/table/index.hbs
2022-10-26 16:06:12 +08:00

90 lines
1.7 KiB
Handlebars

{{#if template}}
<template>
<div class="{{ name }}-container">
<base-table :table-config="tableProps" :table-data="list" :is-loading="listLoading">
<method-btn slot="handleBtn" :method-list="tableBtn" @clickBtn="handleClick" />
</base-table>
<pagination v-show="total > listQuery.size" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
</div>
</template>
{{/if}}
{{#if script}}
<script>
// edit here
const tableBtn = [{
type: 'edit',
btnName: 'btn.edit'
}, {
type: 'delete',
btnName: 'btn.delete'
}]
const tableProps = [{
prop: '',
label: '',
width: '',
filter: null,
subcomponent: null,
align: ''
}]
import BaseTable from '@/components/BaseTable'
// edit here
import { fetchList } from '@/api/article'
import Pagination from '@/components/Pagination'
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
export default {
name: '{{ properCase name }}',
props: {},
components: { Pagination, BaseTable, MethodBtn },
data() {
return {
tableBtn,
tableProps,
list: [],
total: 0,
listLoading: true,
listQuery: {
current: 1,
size: 10
}
}
},
created() {
this.getList()
},
mounted() {},
methods: {
handleClick(raw) {
},
getList() {
this.listLoading = true
// edit here
fetchList(this.listQuery).then(response => {
this.list = response.data.records
this.total = response.data.total
this.listLoading = false
})
}
}
}
</script>
{{/if}}
{{#if style}}
<style lang="scss" scoped>
.{{ name }}-container {
}
.edit-input {
padding-right: 100px;
}
.cancel-btn {
position: absolute;
right: 15px;
top: 10px;
}
</style>
{{/if}}