11-mes-new/plop-templates/table/index.hbs

{{#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}}