gzyr-components

v0.2.3

Published

4 years ago

components of custom

0High
0Medium
0Low

husida

Introduction

This component should be used with our basic frames. It makes ours development more convenient.

Start

npm install nrm

nrm add gzyaorui http://npm.gzyaorui.cn

nrm use gzyaorui

nrm current

If the last command's log is gzyaorui, please go on.

npm install v-components@latest

Then you have installed this component successfully.

Attention

If this component installed, you have something to do with followings:

Add these sentences to main.js:

import Vue from 'vue';
import vComponent from 'v-components';
vComponent.install(Vue);

And then, change to style/index.scss:

@import "v-components/components.scss";

Of course, you can write these sentences everywhere you want, if it works correctly.

表格组件 v-table

v0.7

概述

使用了https://xuliangzhan_admin.gitee.io/vxe-table/v2/ 进行重新封装，默认开始大数据优化处理，不开启时使用和element-ui一样

封装了结合 iView 和 element-ui 风格使用的el-table，渲染数据方式可参照element-ui，亦可参照iView，属性和事件和el-table基本相同。该组件与 element-ui 的 el-table 的最大区别是修改部分属性默认值，以及自动计算表格高度、列宽、固定首尾列、更智能的树形表格等功能。下面，将在说明中详细介绍这些功能

特点

设置属性默认值 stripe，是否显示斑马纹。该属性默认值为true，如果该表格为树形表格（这里指一定要有下级的树形表格，以下都称之为 “树形表格” ），则默认值为 false
设置属性默认值 defaultExpandAll 当表格为树形表格时，默认值为 true，默认展开所有节点，且表头会带有 “展开全部” 和 “收起全部” 的功能
设置属性默认值 height 默认高度自动计算，但当表格不搭配分页组件使用时，请设置 :noPage="true" 的属性
针对树形表格进行优化，默认全部收起，且在表头处提供了一键展开和收起所有列表数据的功能，方便快捷
自动计算部分列宽，详细说明见 ../v-table-column/README.md
自动固定首尾列，详细说明见 ../v-table-column/README.md

基本使用

普通表格

<v-table :data="colData">
	<v-table-column :label="label" prop="prop"></v-table-column>
</v-table>

或

<v-table :data="colData" :columns="columns"></v-table>

data: {
	colData: [],
	columns: [
		{
			title: "部门名称",
			key: "ORG_NAME",
			align: "center"
		},
		{
			title: "部门描述",
			key: "NOTE",
			align: "center"
		},
		{
			title: "成员数量",
			key: "num",
			align: "center",
			width: 66,
			render: (h, params) => {
				return tableOperRender(h, "", [params.row.num], () => {
					//点击部门成员数量
					this.$router.push("/personnel-manage/person-manager?orgCode=" + params.row.ORG_CODE);
				});
			}
		},
		{
			title: "上级部门",
			key: "PARENT_NAME",
			align: "center"
		},
		{
			title: "操作",
			render: (h, params) => {
				return tableOperRender(h, "", () => {
					//修改
					this.showModalFn(params.row);
				}, () => {
					//删除
					this.deleteItem(params.row.ORG_CODE);
				});
			},
			align: "center",
			width: 150
		}
	],
}

树形表格

1、需要配置row-key，tree-props，tree-node（改列有展开图片按钮） 2、顶部的展开全部需要手动配置，:columns="columns" 3、自定义的展开收起全部可以用，triggerExpand(flag)方法

<v-table ref="table" v-loading="tableLoading" class="menu-table" row-key="MENU_CODE" :columns="columns" :data="data" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
	<v-table-column tree-node prop="name" label="名称" width="68" align="center"></v-table-column>
	<v-table-column label="操作">
		<template slot-scope="scope">
			<v-button v-perm="'MenuEdit'" @click.native.prevent="handleEditClick(scope.row.MENU_CODE)">修改</v-button>
			<v-button v-perm="'MenuEdit'" @click.native.prevent="handleDelClick(scope.row, data)">删除</v-button>
		</template>
	</v-table-column>
</v-table>

<script>
columns: [
	{
		label: "功能项",
		prop: "name",
		width: 300,
		expand: true,
		treeNode: true
	}
]
</script>

api

props

| 属性 | 说明 | 类型 | 默认值 | | ------------ | ------------------------------------- | ------- | ------ | | columns | 列表配置 | Array | [] | | highlight-current-row | 是否使用单选高亮 | Boolean | false | | loading | 加载提示 | Boolean | false | | tableName | 设置内部 el-table 的 ref,用来调用方法 | String |'vTable' | | noPage | 当前表格是否不搭配分页组件使用，该属性会影响到表格的默认高度 | Boolean | false | | height | 表格的高度（若不想固定高度，请设置height="unset"）| Number | | | maxHeight | 表格的最大高度（注意：父元素可能会出现滚动条）| Number, String | | | border | 显示表格边框 | Boolean | true |

events

methods

triggerExpand(flag)，flag为true时收起所有，false展开所有

tips

在选中高亮（highlight-current-row）表格里，如果想在操作列点击按钮的时候，不触发选中高亮事件，可在按钮的点击事件使用阻止冒泡的方法：
1. 绑定点击事件写成 <v-button @click.native.stop="onClick($event)"></v-button>;
2. 或者在 onClick 事件里加上 $event.stopPropagation()。

表格列组件 v-table-column

v0.0.1

概述

封装了以element-ui的el-table-column

基本使用

<v-table-column prop="name" label="姓名"></v-table-column>

api

props

| 属性 | 说明 | 类型 | 默认值 | | ------------ | ---------------------------------- | --------------- | ------ | | size | 中文字个数 | Number, String | | | showOverflow | 'ellipsis','tooltip','none'，前两个参考可参考 vxe-table，最后一个即是即不用省略号显示，也不溢出显示提示框| String | 默认'ellipsis'，但当该列为操作列时，默认值为'none' | | 其余属性-> | 请看下方-> | tips~ | thanks |

events

methods

tips

width
- 宽度设置的公式为 width = size * 12 + 20; 其中，size 为中文字数，12 是每个字的默认字体大小，20 为左右 padding 的和
- 当该列为一下几种情况时，会设置默认宽度：
  1. selection：34px
  2. 操作：84px（即2个操作按钮，修改、删除的宽度）
  3. 时间：135px（带日期 + 时间）
  4. 日期：85px
align
- 当该列为操作、时间、日期、selection 时，默认为 center
className
- 操作菜单会默认加类名 class: 'v-table-column-oper'
showOverflowTooltip
- 非 selection 的列，默认该属性值为 true
fixed
- 若该列为操作菜单，默认设置为 right，若为 selection，默认设置为 left

弹窗组件（主要针对表单）

v0.0.1

概述

封装了以 element-ui 的 el-dialog，特点是上下左右居中，不会超出屏幕而出现页面级别的滚动条，如果内容太长，会自动生成内部滚动条。

基本使用

<v-dialog title="新增">
	<el-form :model="fd">
		<el-form-item prop="name" lable="姓名">
			<el-input v-model="fd.name"></el-input>
		</el-form-item>
	</el-form>
</v-dialog>

api

props

| 属性 | 说明 | 类型 | 默认值 | | --------------- | ---------------------- | ------------- | ------ | | width | 弹窗窗体宽度 | String | 600px | | unity | 使用统一表单样式（如果 detail 为 true，则该属性设置无效） | Boolean | true | | detail | 是否是查看详情（详情样式） | Boolean | false | | loading | body部分的loading | Boolean | | | confirmLoading | 确定按钮的加载状态 | Boolean | | | showFullscreen | 是否显示全屏按钮 | Boolean | | | 其余属性-> | 请参考-> | ElementUI | thanks |

events

@confirm 点击确定按钮后的回调

methods

tips

该弹窗主要是针对弹窗表单而作，建议宽度为 9 个表单项内，设置为单列表单，宽度 600px；大于 9 个表单项的，设置为双列表单，宽度 1000px，并使用 el-row，el-col 来布局。

如果右边的 el-form-item__content 部分的组件没有边框，如 el-switch、el-radio、el-checkbox 等，只需在 el-form-item 组件上加上一个 class="content-border" 即可。例如：（注：单个的 el-radio、el-checkbox 需要手动加 class，如果是一个组，如 el-radio-group、el-checkbox-group 则无需加 class）

<v-dialog title="配置">
	<el-form :model="fd">
		<el-form-item prop="open" lable="是否开启" class="content-border">
			<el-switch v-model="fd.open"></el-switch>
		</el-form-item>
	</el-form>
</v-dialog>

按钮组件

v0.5

修改iview Button组件，根据按钮文字增加、删除、查询显示不同的图标

基本使用

基本和iview Button 一模一样不同点：

点击事件不能使用.prevent
默认是type="primary" 蓝色按钮
根据文字的不同，显示不同的图标

<v-button>查询</v-button>

图标组件

v0.0.1 封装图标组件

当前使用的图标有3种

element自带图标，前缀el-icon
ion图标，前缀ion-md或者ion-ios
font awesome图标，前缀fa fa-
svg图标，把svg图片放到src/icons/svg目录下

可以通过框架/demo/icons页面查看使用图标

基本使用

<v-icon type="el-icon-close">关闭</v-icon>

属性

type
- 接收一个String类型的值。
- 若是element自带的图标，类似"el-icon-close"即可;
- 若是ionicons.com的图标，类似"ion-md-close"即可;v4版本
- 若是font awesome的图标，类似"ion-md-close"即可;
- 若是自定义的svg图标，只需要填入该图标的文件名如"setting"即可。
size
- 图标的大小，font-size的值。只需要填入数字即可，组件中会自动加上单位px
color
- 图标的颜色。
nclass
- 图标类

事件event

click
- 点击事件

表单标签组件

v1.0

概述

该组件可以很好地解决表单标签名称过长看不全的问题，既可以开启鼠标移入显示 tooltip，还隐藏了鼠标点击标签后标签展开显示的彩蛋，再次点击则收起。

基本使用

<el-form>
	<el-form-item>
		<v-label slot="label" label="500米内的公交站个数"></v-label>
		<el-input v-model="bus_count"></el-input>
	</el-form-item>
</el-form>

props

| 属性 | 说明 | 类型 | 默认值 | | ------------ | ------------------------------------- | ------- | ------ | | label | label 的名称。同 el-form 的 label | String | | | tooltip | 是否开启鼠标移入提示 | Boolean | true |

events

methods

分页组件

v0.0.1

概述

基本使用

<v-page :total="personTotal" :page="searchForm.pageNumber" @change="personChange"></v-page>

api

props

其他属性和 Element 的 el-pagination的属性相同

| 属性 | 说明 | 类型 | 默认值 | | ----------- | ---------------------------- | ------- | ------------------------------------------------- | | auto-scroll | 分页之后是否自动滚动到顶部 | Boolean | true | | layout | 绑定是否展示 | Boolean | false | | limit | 每页条数 | Number | 框架配置 config.pageSize | | page | 当前页码 | Number | 1 | | total | 组件布局，子组件名用逗号分隔 | String | sizes, prev, pager, next, jumper, ->, total, slot |

events

| 事件名 | 说明 | 返回值 | 备注 | | ------ | -------------- | ------ | ---------------------------- | | change | 页数、页码改变 | | page(当前页码),limit(每页条数) |

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Introduction

Start

Attention

表格组件 v-table

概述

特点

基本使用

普通表格

树形表格

api

props

events

methods

tips

表格列组件 v-table-column

概述

基本使用

api

props

events

methods

tips

弹窗组件（主要针对表单）

概述

基本使用

api

props

events

methods

tips

按钮组件

基本使用

图标组件

基本使用

属性

事件event

表单标签组件

概述

基本使用

props

events

methods

分页组件

概述

基本使用

api

props

events

methods