vue-pro-page

中后台页面组件

Development

$ yarn add vue-pro-page

前言

本组件适用于中后台管理系统，由表单、列表、页码三部分组成。

减少冗余代码，只需配置一些选项即可渲染页面。

提高开发效率，便于维护。

经过写20个制作页面测试统计，相同页面使用当前库能提高20分钟左右开发

1.注意事项：

项目里面注意要配置vue- i18n。

2.后端规范字段：

1.选择器 映射数据字段 => 数组 []

demo [ {lable：标题 , value：选择值} ]

2.列表映射 映射字段 => {}

demo { key: '映射值'， value： ‘显示值’ }

引入：

--全局引入--
import Vue from 'vue';
import DynamicPage from 'vue-pro-page';// +
Vue.use(DynamicPage);  // +

or

--单独引入--
import { DynamicPage } from 'vue-pro-page'; // +
Vue.component(DynamicPage.name, DynamicPage);   // +

一、Form组件

1.Form Attributes

参数	说明	类型	默认值
form	见2.1表	Array	[]
hasControl	控制按钮是否显示	Boolean	true
sumbitText	提交按钮显示文本	String	'提交'
resetText	重置按钮显示文本	String	'重置'

2.Form Option

(2.1表)

参数	说明	类型	默认值
title	表单名称	String	-
key	字段	String	-
type	表单类型	input、select、radio...	Input
options	表单为select、radio的时候用, 支持对象格式{key: 值， value： '标题'}	Array \| { }	[{label: '', value: ''} ]
defaultValue	默认值	String \| Number \| Array	-
props	接受element原始属性值	Object	{}
isRequired	是否校验	Boolean	false
contentWidth	文本宽度	Number \| String	220px
rule	校验规则	Array \| Object	[] \| {}
mapKey	日期选择多个key值(参数一：开始时间，参数二：结束时间)。返回两个时间戳	Array	[ ]
interval	日期间隔默认时间（天）	Number ｜ String	-

3.Form Events

事件名称	说明	参数
submit	Form提交方法，返回两个参数。参数一form值，第二个参数校验值	Function(data, valid)
reset	重置按钮，返回form值	Function(form)

Demo

<template>
  <dynamic-page :form="form" @submit="onSubmit"> </dynamic-page>
</template>

export default {
  data() {
    return {
       form: [
        { title: '员工', key: 'name', type: 'input',},
        {
          title: '时间',
          key: 'time',
          type: 'daterange',
          mapKey: ['start', 'end'], // 返回mapkey两个字段
          interval: 7, // 默认间隔7天
        },
        {
          title: '选择器',
          key: 'selectKey',
          type: 'select'
          options: [
            { label: 'name', value: '一方', },
        	  { label: 'base', value: '广州', },
          ],
        },
      ],
    }
  },
  methods: {
    onSubmit(data, valid) {
  	// 接受两个参数：
    // data: 返回的formdata值 类型：Object
    // valid: 校验值 类型： Booler
   }
  }
}

4.Form Scoped Slot

form表单支持具名插槽获取当前值

name	说明	默认值
formData	当前form所有值	{}

Demo

<template>
  <dynamic-page :form="form">
   + <template v-slot:formData="{ form }">
   +  <div>{{ form }}</div>  
	 +		<!--获取值： { "name": null, "age": null,  }  -->
   +  </template>
  </dynamic-page>
</template>

export default {
  data() {
    return {
       form: [
        { title: '员工', key: 'name', type: 'input' },
        { title: '年龄', key: 'age', type: 'input' },
      ],
    }
  },
}

二、table组件

1.Aable Attributes

table列表接受两个属性值，一个为列表值，一个为配置值。

参数	说明	类型	默认值
tableData	table列表值	Array	[ ]
tableConfig	table配置项	Array	[ ]
isTableCheckBox	table条件显示列	boolean	false

2.tableConfig Attributes

参数	说明	类型	默认值
key	列表字段	String	''
title	列表标题	String	''
props	接受element原始属性值	Object	{}
format	格式化时间可以传递 (YYYY-MM-DD)进行过滤	String \|boolean	true
render	render函数进行渲染	Function	-
map	映射数据的map值映射key值来获取value显示	Object	{}

Demo

<template>
  <dynamic-page :tableData="tableLists" :tableConfig="tableConfig"></dynamic-page>
</template>

export default {
  data() {
    return {
       tableConfig: [
        { key: 'date', title: '时间', props: { width: 180 }, format: true },
        { key: 'name', title: '姓名' },
        { key: 'address', title: '地区' },
        { key: 'jobs', title: '岗位' },
      ],
       tableLists: [
        { date: 1607265511, name: '一方', address: '广州', jobs: '前端' },
        { date: 1607265510, name: 'xx', address: '广州', jobs: '前端' },
        { date: 1607265511856, name: 'xx', address: '广州', jobs: '前端' },
        { date: 1608870702164, name: 'xx', address: '广州', jobs: '后端' },
      ],
    }
  },
}

3.Table-column Scoped Slot

通过 v-slot:name = { scope } 可以获取到 row, column, $index的数据，用法参考 demo。

注意:name就是key的值对应。

name	说明	默认值
key	自定义列的内容，参数为 { row, column, $index }	-

Demo

<template>
  <dynamic-page :tableData="tableLists" :tableConfig="tableConfig">
   + <template v-slot:option="scope">
   +   <div>
   +     <el-button type="primary" @click="handleOption(scope)">操作</el-button> 
   +   </div>
   +  </template>
  </dynamic-page>
</template>

export default {
  data() {
    return {
       tableConfig: [
        { key: 'date', title: '时间', props: { width: 180 }, format: true },
        { key: 'name', title: '姓名' },
        { key: 'address', title: '地区' },
        { key: 'jobs', title: '岗位' },
        { key: 'option', title: '操作' }, // 自定义一个key值来进行插槽使用
      ],
       tableLists: [
        { date: 1607265511, name: 'xx', address: '广州', jobs: '前端' },
        { date: 1607265510, name: 'xx', address: '广州', jobs: '前端' },
        { date: 1607265511856, name: 'xx', address: '广州', jobs: '前端' },
        { date: 1608870702164, name: 'xx', address: '广州', jobs: '后端' },
      ],
    }
  },
  methods: {
   handleOption(scope) {}, 
  }
}

4.table使用render函数

参考Vue-render地址：参考地址，在table里面不想添加key来进行插槽使用时，也可以使用render函数来进行渲染。

参数一：render函数，参数二：当前行值

Demo

export default {
  data() {
    return {
       tableConfig: [
        { key: 'date', title: '时间', props: { width: 180 }, format: true },
        { key: 'address', title: '地区' },
        { key: 'jobs', title: '岗位' },
        {
          key: 'option',
          title: '操作',
          render: (h, { row }) => {
            return h('el-button', {
              props: {
                type: 'primary',
              },
              on: {
                click: () => {
                  this.onUpdate(row);
                },
              },
              domProps: {
                innerHTML: '操作',
              },
            });
          },
        },
      ],
       tableLists: [
        { date: 1607265511, name: '一方', address: '广州', jobs: '前端' },
        { date: 1607265510, name: 'xx', address: '广州', jobs: '前端' },
        { date: 1607265511856, name: 'xx', address: '广州', jobs: '前端' },
        { date: 1608870702164, name: 'xx', address: '广州', jobs: '后端' },
      ],
    }
  },
  methods: {
    onUpdate(row) {}
  }
}

三、Pagination 分页使用

Pagination Attributes

参数	说明	类型	默认值
currentPage	当前页码	Number	1
pageSize	页数	Number	10
total	总条数	number	-
pageSizes	每页显示个数选择器的选项设置	number ｜ []	[10, 20, 30, 40, 50, 100]

Pagination Events

事件名称	说明	回调函数
changeSize	pageSize 改变时会触发	size，formData
changePage	currentPage 改变时会触发	page, formData

Demo

<template> 
	<dynamic-page
      @changePage="changePage"
      :total="total"
      :currentPage="1"
      :pageSize="10"
    ></dynamic-page>
</template>

export default {
 methods: {
    changePage(page, form) { 
      // 接受两个参数
      //1. page 当前页码
      //2. form 表单数据
      console.log(page, form);
    },
  },
}

首次加载页面获取form数据

有的时候需要初始化的时候就进行查询列表，这时候需要触发一次搜索事件。下面就演示代码：

<template> 
	<dynamic-page
     ref="page"
		 @submit="handleSearch"
    ></dynamic-page>
</template>

export default {
 methods: {
    getInit() { 
     this.$refs['page'].onSearch();
    },
   handleSearch(form, valid) {
     console.log(form); // 初始化会触发
   }
  },
 created() {
   this.getInit();
 }
}

Name		Name	Last commit message	Last commit date
Latest commit History 28 Commits
.vscode		.vscode
public		public
src		src
test		test
.gitignore		.gitignore
README.md		README.md
babel.config.js		babel.config.js
package.json		package.json
vue.config.js		vue.config.js
webpack.config.js		webpack.config.js
yarn-error.log		yarn-error.log
yarn.lock		yarn.lock

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

vue-pro-page

中后台页面组件

Development

前言

引入：

一、Form组件

1.Form Attributes

2.Form Option

3.Form Events

4.Form Scoped Slot

二、table组件

1.Aable Attributes

2.tableConfig Attributes

3.Table-column Scoped Slot

三、Pagination 分页使用

Pagination Attributes

Pagination Events

首次加载页面获取form数据

About

Releases

Packages

Languages

hzs0623/vue-pro-page

Folders and files

Latest commit

History

Repository files navigation

vue-pro-page

中后台页面组件

Development

前言

引入：

一、Form组件

1.Form Attributes

2.Form Option

3.Form Events

4.Form Scoped Slot

二、table组件

1.Aable Attributes

2.tableConfig Attributes

3.Table-column Scoped Slot

三、Pagination 分页使用

Pagination Attributes

Pagination Events

首次加载页面获取form数据

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages