vite-manageweb/plop-templates/table-page.hbs

<template>
  <div>
    <div class="app-container account-container" v-loading="viewLoading">
      <div class="toolbar-container">
        <AccToolBar
          ref="toolbar"
          direction="left"
          :default-show-buttons="['Refresh']"
          @refreshEvent="refreshEvent"
        />
      </div>
      <div class="scroll-box-container">
        <div class="body-container">
          <vxe-grid
            border
            resizable
            auto-resize
            show-footer
            highlight-hover-row
            highlight-current-row
            show-overflow="tooltip"
            ref="xGrid"
            max-height="800"
            row-id="id"
            align="left"
            size="medium"
            :loading="tableLoading"
            :columns="tableColumn"
            :form-config="tableForm"
            :pager-config="tablePage"
            :proxy-config="tableProxy"
            :cell-class-name="cellClassName"
          >
          <!-- template插槽 -->
          </vxe-grid>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AccToolBar from '@/components/AccToolBar'

export default {
  name: '{{ properCase name }}',
  components: {
    AccToolBar
  },
  data() {
    return {
      viewLoading: false,
      tableLoading: false,
      tableForm: {
        data: {
          name: ''
        },
        items: [
          {
            visible: true,
            sapn: 4,
            field: 'name',
            title: '',
            itemRender: {
              name: '$input'
            }
          }
        ],
        display: 'outline'
      },
      tableColumn: [
        { type: 'seq', width: 50 },
        {
          visible: true,
          align: 'center',
          title: this.$t('table.body.status'),
          field: 'status',
          slots: {
            default: 'status_default'
          }
        },
        {
          visible: true,
          title: this.$t('basic.table.body.operate'),
          align: 'center',
          field: 'operate',
          slots: {
            default: 'operate_default'
          }
        }
      ],
      tableProxy: {
        autoLoad: true, // 是否自动加载查询数据
        seq: true, // 启用动态序号代理
        sort: true, // 启用排序代理
        filter: true, // 启用筛选代理
        form: true, // 启用表单代理
        props: {
          result: 'results',
          total: 'count'
        },
        ajax: {
          query: ({ page, sort, filters, form }) => {
            const pageParams = {
              page: page.currentPage,
              page_size: page.pageSize
            }
            const data = Object.assign(pageParams, this.tableForm.data)
            console.log(data)
          }
        }
      },
      tablePage: {
        pageSize: 20,
        pageSizes: [10, 20, 50, 100, 200, 500, 1000]
      }
    }
  },
  watch: {

  },
  created() {

  },
  mounted() {

  },
  methods: {
    // 数字为负数的，显示为红色
    cellClassName({ row, rowIndex, column, columnIndex }) {
      const field = column.property
      const cellValue = row[field]
      if (typeof cellValue === 'number' && cellValue < 0) {
        return 'col-red'
      }
    },
    refreshEvent() {
      this.$refs.xGrid.commitProxy('query')
    }
  }

}
</script>

<style lang="scss" scoped>

</style>