vue-pro-page v0.0.2

vue-pro-page

中后台页面组件

demo

Development

$ yarn add vue-pro-page

前言

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

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

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

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

2.Form Option

(2.1表)

3.Form Events

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表单支持具名插槽获取当前值

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列表接受两个属性值，一个为列表值，一个为配置值。

2.tableConfig Attributes

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的值对应。

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

Pagination Events

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);
    },
  },
}