安装

Page.vue 目前提供两种安装方式：CDN 引入 和 npm 安装。

Page.vue 依赖于 Vue 和 Element UI。出于打包体积等原因，Page.vue 并未在内部安装 Vue 和 Element UI，而是依赖外部提供的 Vue 和 Element UI。因此，需要提前安装这两个库。

关于 Vue 的安装，请参考 Vue 安装指南。
关于 Element UI 的安装，请参考 Element UI 安装指南。

CDN 引入

目前可以通过 unpkg.com/page-element2 获取到最新版本的资源，在页面上引入 js 即可开始使用。

<!-- 引入 Page.vue -->
<script src="https://unpkg.com/page-element2"></script>

通过 CDN 引入 Page.vue 时，它会在 window 对象下挂载 $VPage 属性，我们需手动调用 Vue.use 进行安装。

<script>
// 安装到 vue
Vue.use($VPage);
</script>

hello world

通过 CDN 的方式我们可以很容易地使用 Page.vue 写出一个增删改查页面。

npm 安装

在命令行执行安装

npm install page-element2

在 main.js 中写入以下内容：

import VPage from 'page-element2';

Vue.use(VPage);

开始使用

创建 .vue 单文件组件, 写入以下内容：

<template>
  <div style="height: 100%; width: 100%">
    <VPage :page="pageOption"></VPage>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageOption: {
        tree: {
          field: 'deptId',
          api: 'https://page-element2.glh.red/mook/tree.json',
        },
        search: [
          { label: '账号', field: 'id' },
          { label: '姓名', field: 'name' },
          {
            label: '性别', field: 'gender', type: 'select', option: [
              { id: '0', name: '男' },
              { id: '1', name: '女' },
              { id: '2', name: '未知' }
            ]
          }
        ],
        button: [
          { name: '添加', click: () => console.log('点击了添加') },
          { name: '编辑', selectCount: 1, click: this.edit },
          { name: '删除', selectMin: 1, click: this.del },
        ],
        table: {
          select: true,
          api: 'https://page-element2.glh.red/mook/table.json',
          col: [
            { field: 'id', name: '账号' },
            { field: "name", name: "姓名" },
            { field: "gender", name: "性别" },
            { field: "birthday", name: "生日" },
            { field: "age", name: "年龄" },
            {
              name: '联系方式', children: [
                { field: "email", name: "电子邮件" },
                { field: "phone", name: "电话号码" },
              ]
            },
            { field: "city", name: "城市" },
            { field: "address", name: "地址" },
            { field: "occupation", name: "职业" },
            { field: "company", name: "公司" },
            { field: "hobbies", name: "爱好", fmt: (value) => value.join(',') },
            {
              name: '操作', type: "button", button: [
                { name: '详情' },
                { name: '编辑', click: ({ row }) => this.edit([row]) },
                { name: '删除', confirmClick: ({ row }) => this.del([row]) },
              ]
            }
          ]
        }
      }
    }
  },
  methods: {
    edit(rows) {
      console.log('点击了编辑，选中的行：', rows)
    },
    del(rows) {
      console.log('点击了删除，选中的行：', rows)
    },
  }
}
</script>

以上代码，实现基础用户管理功能。页面左侧为组织架构树，右侧为查询条件、工具栏按钮、数据表格。

安装示例

此处 提供了一个示例项目，包含 Vue、Vue-Router、Element UI 和 Page.vue，演示了 Page.vue 的安装以及一些使用示例。