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)表格里,如果想在操作列点击按钮的时候,不触发选中高亮事件,可在按钮的点击事件使用阻止冒泡的方法:
- 绑定点击事件写成
<v-button @click.native.stop="onClick($event)"></v-button>
; - 或者在 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 的和 - 当该列为一下几种情况时,会设置默认宽度:
- selection:
34px
- 操作:
84px
(即2个操作按钮,修改、删除的宽度) - 时间:
135px
(带日期 + 时间) - 日期:
85px
- selection:
- 宽度设置的公式为
- align
- 当该列为操作、时间、日期、selection 时,默认为
center
- 当该列为操作、时间、日期、selection 时,默认为
- className
- 操作菜单会默认加类名
class: 'v-table-column-oper'
- 操作菜单会默认加类名
- showOverflowTooltip
- 非 selection 的列,默认该属性值为
true
- 非 selection 的列,默认该属性值为
- 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(每页条数) |