kpt-pasture/src/views/user.vue

<template>
  <vxe-grid v-bind="gridOptions" style="width:98%"></vxe-grid>
</template>

<script lang='ts'>
import { reactive } from "vue";
import { VxeGridProps } from "vxe-table";
export default {
  name: "user",
  setup() {
    const gridOptions = reactive({
      border: true,
      resizable: true,
      keepSource: true,
      height: 500,
      printConfig: {},
      importConfig: {},
      exportConfig: {},
      pagerConfig: {
        perfect: true,
        pageSize: 15,
      },
      editConfig: {
        trigger: "click",
        mode: "row",
        showStatus: true,
      },
      toolbarConfig: {
        buttons: [
          {
            code: "insert_actived",
            name: "新增",
            status: "perfect",
            icon: "fa fa-plus",
          },
          {
            code: "mark_cancel",
            name: "标记/取消",
            status: "perfect",
            icon: "fa fa-trash-o",
          },
          {
            code: "save",
            name: "保存",
            status: "perfect",
            icon: "fa fa-save",
          },
        ],
        perfect: true,
        refresh: {
          icon: "fa fa-refresh",
          iconLoading: "fa fa-spinner fa-spin",
        },
        import: {
          icon: "fa fa-upload",
        },
        export: {
          icon: "fa fa-download",
        },
        print: {
          icon: "fa fa-print",
        },
        // zoom: {
        //   iconIn: "fa fa-arrows-alt",
        //   iconOut: "fa fa-expand",
        // },
        custom: {
          icon: "fa fa-cog",
        },
      },
      proxyConfig: {
        props: {
          result: "result",
          total: "page.total",
        },
        ajax: {
          // 接收 Promise
          query: ({ page }) => {
            return new Promise((resolve) => {
              setTimeout(() => {
                const list = [
                  {
                    id: 10001,
                    name: "Test1",
                    nickname: "T1",
                    role: "Develop",
                    sex: "Man",
                    age: 28,
                    address: "Shenzhen",
                  },
                  {
                    id: 10002,
                    name: "Test2",
                    nickname: "T2",
                    role: "Test",
                    sex: "Women",
                    age: 22,
                    address: "Guangzhou",
                  },
                  {
                    id: 10003,
                    name: "Test3",
                    nickname: "T3",
                    role: "PM",
                    sex: "Man",
                    age: 32,
                    address: "Shanghai",
                  },
                  {
                    id: 10004,
                    name: "Test4",
                    nickname: "T4",
                    role: "Designer",
                    sex: "Women ",
                    age: 23,
                    address: "Shenzhen",
                  },
                  {
                    id: 10005,
                    name: "Test5",
                    nickname: "T5",
                    role: "Develop",
                    sex: "Women ",
                    age: 30,
                    address: "Shanghai",
                  },
                  {
                    id: 10006,
                    name: "Test6",
                    nickname: "T6",
                    role: "Designer",
                    sex: "Women ",
                    age: 21,
                    address: "Shenzhen",
                  },
                  {
                    id: 10007,
                    name: "Test7",
                    nickname: "T7",
                    role: "Test",
                    sex: "Man ",
                    age: 29,
                    address: "vxe-table 从入门到放弃",
                  },
                  {
                    id: 10008,
                    name: "Test8",
                    nickname: "T8",
                    role: "Develop",
                    sex: "Man ",
                    age: 35,
                    address: "Shenzhen",
                  },
                  {
                    id: 10009,
                    name: "Test9",
                    nickname: "T9",
                    role: "Develop",
                    sex: "Man ",
                    age: 35,
                    address: "Shenzhen",
                  },
                  {
                    id: 100010,
                    name: "Test10",
                    nickname: "T10",
                    role: "Develop",
                    sex: "Man ",
                    age: 35,
                    address: "Guangzhou",
                  },
                  {
                    id: 100011,
                    name: "Test11",
                    nickname: "T11",
                    role: "Test",
                    sex: "Women ",
                    age: 26,
                    address: "vxe-table 从入门到放弃",
                  },
                  {
                    id: 100012,
                    name: "Test12",
                    nickname: "T12",
                    role: "Develop",
                    sex: "Man ",
                    age: 34,
                    address: "Guangzhou",
                  },
                  {
                    id: 100013,
                    name: "Test13",
                    nickname: "T13",
                    role: "Test",
                    sex: "Women ",
                    age: 22,
                    address: "Shenzhen",
                  },
                ];
                resolve({
                  page: {
                    total: list.length,
                  },
                  result: list.slice(
                    (page.currentPage - 1) * page.pageSize,
                    page.currentPage * page.pageSize
                  ),
                });
              }, 100);
            });
          },
          // body 对象： { removeRecords }
          delete: () => {
            return new Promise((resolve) => {
              setTimeout(() => {
                resolve({});
              }, 100);
            });
          },
          // body 对象： { insertRecords, updateRecords, removeRecords, pendingRecords }
          save: () => {
            return new Promise((resolve) => {
              setTimeout(() => {
                resolve({});
              }, 100);
            });
          },
        },
      },
      columns: [
        { type: "checkbox", width: 50 },
        { type: "seq", width: 60 },
        { field: "name", title: "Name", editRender: { name: "input" } },
        { field: "nickname", title: "Nickname", editRender: { name: "input" } },
        { field: "role", title: "Role", editRender: { name: "input" } },
        {
          field: "address",
          title: "Address",
          showOverflow: true,
          editRender: { name: "input" },
        },
      ],
    } as VxeGridProps);

    return {
      gridOptions,
    };
  },
};
</script>

<style scoped>
</style>