1.1.51 • Published 8 months ago

vex-page v1.1.51

Weekly downloads
-
License
ISC
Repository
-
Last release
8 months ago

vex-page

vue3 管理后台通用列表页面。Vue3 + Element Plus

安装

npm install vex-page

使用

import VexPage from 'vex-page' //导入
// 项目按需引用element-plus, 则需要改为
// import VexPage from 'vex-page/es/index.mjs' 或 import VexPage from 'vex-page/lib/index.js'
// import 'vex-page/es/style.css' 或 import 'vex-page/lib/style.css'

// 设置配置文件
app.use(VexPage, {
  config: {
    pageSizeKey: 'pageSize',
    pageNumKey: 'pageNum',
    getList: res => res.data,
  }
})
<template>
  <v-page
    :columns="columns"
    :btns="btns"
    :filter="filters"
    :get-list="getList"
    @test="test"
  />
</template>

<script setup>
import avatar from './avatar.js'

// 获取列表
const getList = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        data: [
          {
            id: 1,
            avatar,
            name: '张三',
            age: 18,
            gender: 0,
            select: 0,
            number: 5000,
            table: [
              {
                id: 1,
                name: '张三',
                age: 18,
                gender: 0,
                select: 0,
                number: 5000,
              }
            ]
          },
          {
            id: 2,
            avatar,
            name: '李四',
            age: 19,
            gender: 1,
            select: 0,
            number: 25000,
            table: [
              {
                id: 2,
                name: '李四',
                age: 19,
                gender: 1,
                select: 0,
                number: 25000,
              }
            ]
          },
        ],
        total: 3,
      })
    }, 1000)
  })
}

const gender = [
  { label: '男', value: 0, type: 'primary' },
  { label: '女', value: 1, type: 'success' },
]

const select = [
  { label: '0', value: 0, type: 'primary' },
  { label: '1', value: 1, type: 'success' },
]

const change = (row, value) => {
  console.log(row, value)
}

// 表格配置
const columns = [
  { label: '姓名', prop: 'name', },
  { label: '头像', prop: 'avatar', scope: 'img', width: 100 },
  { label: 'number', prop: 'number', scope: 'number-col' },
  { label: 'input', prop: 'age', scope: 'input', change },
  { label: 'select', prop: 'select', scope: 'select', options: select },
  { label: '性别', prop: 'gender', scope: 'tag', options: gender },

  // { label: '嵌套', prop: 'table', scope: 'table',
  //   options: [
  //     { label: '姓名', prop: 'name', },
  //     { label: 'number', prop: 'number', scope: 'number-col' },
  //     { label: 'input', prop: 'age', scope: 'input', change },
  //     { label: 'select', prop: 'select', scope: 'select', options: select },
  //     { label: '性别', prop: 'gender', scope: 'tag', options: gender },
  //   ]
  // },

  // 操作列
  {
    label: '操作',
    fixed: 'right',
    width: 200,
    scope: 'btn',
    options: [
      { text: 'test', event: 'test' }
    ]
  },
]

const test = (row) => {
  console.log(row)
}

const showAdd = () => {
}

const filters = [
  { label: '姓名', prop: 'name', type: 'input' },
  { label: '性别', prop: 'gender', type: 'select', options: gender },
]

// 按钮
const btns = [
  {
    text: '新增',
    click: showAdd
  },
]
</script>

效果

image

setConfig

设置全局配置, 主要是分页时候参数以及获取方法

参数说明类型默认值
pageSizeKey分页参数stringpageSize
pageNumKey分页参数stringpageNum
getList获取列表方法Functionres => res.data
getTotal获取总数方法Functionres => res.total

组件

table 支持scope类型

  • img 图片
  • number-col 数字
  • input 输入框
  • select 下拉框
  • tag 标签
  • table 表格
  • btn 按钮
1.1.51

8 months ago

1.1.50

8 months ago

1.1.49

9 months ago

1.1.48

9 months ago

1.1.47

9 months ago

1.1.46

10 months ago

1.1.29

12 months ago

1.1.28

12 months ago

1.1.30

12 months ago

1.1.34

12 months ago

1.1.33

12 months ago

1.1.32

12 months ago

1.1.31

12 months ago

1.1.38

11 months ago

1.1.37

11 months ago

1.1.36

11 months ago

1.1.35

11 months ago

1.1.39

11 months ago

1.1.41

11 months ago

1.1.40

11 months ago

1.1.45

11 months ago

1.1.44

11 months ago

1.1.43

11 months ago

1.1.42

11 months ago

1.1.27

12 months ago

1.1.26

12 months ago

1.1.25

1 year ago

1.1.23

1 year ago

1.1.22

1 year ago

1.1.21

1 year ago

1.1.20

1 year ago

1.1.24

1 year ago

1.1.19

1 year ago

1.1.18

1 year ago

1.1.17

1 year ago

1.1.16

1 year ago

1.1.15

1 year ago

1.1.14

1 year ago

1.1.12

1 year ago

1.1.13

1 year ago

1.1.11

1 year ago

1.1.10

1 year ago

1.1.9

1 year ago

1.1.8

1 year ago

1.1.7

1 year ago

1.1.6

1 year ago

1.1.5

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.1.2

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.0.28

1 year ago

1.0.27

1 year ago

1.0.26

1 year ago

1.0.25

1 year ago

1.0.19

1 year ago

1.0.18

1 year ago

1.0.17

1 year ago

1.0.16

1 year ago

1.0.22

1 year ago

1.0.21

1 year ago

1.0.20

1 year ago

1.0.24

1 year ago

1.0.23

1 year ago

1.0.15

1 year ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.11

1 year ago

1.0.10

1 year ago

1.0.14

1 year ago

1.0.13

1 year ago

1.0.12

1 year ago

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago