距离上一次写文章已经很久了，不知道时间都去哪了。曾经写过一个element表格，表单的组件的文章，但是当时写的组件可能没那么全面，有些地方还考虑不周的地方，所以这两天重新整理了一下，然后重新发了一个npm包，感兴趣的小伙伴可以去去github或者npm上看源码，这里我只介绍用法建议安装1.1.1版本的（这个版本只有这三个组件）,未来我会将这个UI当成我的一个组件库，里面更新一些我写过的组件。 6.1版本更新，修复一些bug，新增一些组件的传参，提高组件的使用范围
安装
cnpm install elme-ui@1.1.1 -S //建议安装1.1.1
cnpm install elme-ui -S
引用
全局注册：
在main.js中
import ElmeUi from 'elme-ui'
Vue.use(ElmeUi)
eg:我现在写的只能是全局安装的，到后期我优化下
使用
目前包含
form组件（包含input,select,textarea,checkbox,radio,time,citypicker,image,password）
menu组件（支持无限极，icon）
table组件（集成axios，pagenation）
form组件：
它接收5个参数，分别是reform（elform的ref属性），labelWidth（label宽度），labelPosition（label的位置），reformRule（表单校验规则）和formData（表单数据，此参数为必填参数，其他的都有默认值）
//elform的ref属性：可以用this.$refs[reform]来进行一些不一样的操作
reform: {
type: String,
default: function() {
return "alform";
}
},
// label宽度：即文本内容的宽度
labelWidth: {
type: String,
default: function() {
return "110px";
}
},
// label的位置
labelPosition: {
type: String,
default: function() {
return "right";
}
},
//校验规则：和element的一样，所有带校验规则的字段都为必填字段
reformRule: {
type: Object,
default: function() {
return {};
}
},
// 表单数据
formData: {
type: Array,
default: function() {
return [
{
name: "输入框", // 文字label
type: "input", // input,select,textarea,checkbox,radio,time,citypicker,image,password
maxlength:30, // 输入长度限制
hide:false,// 是否显示
field: "id", // 字段名称
isshow: false, // 是否展示
width: false, // 文本宽度
value:'', //默认值， 这个属性在1.0.5以后就不在支持了，
disabled: false, // 是否禁用
placeholder: "请输入", // placeholder提示
multiple: false, // 是否多选，基于select，checkbox
filterable: false, // 是否多选，基于select
options:[//type 为select,checkbox,radio
{
label:'选项',//选项的文字描述
value:'0'//选项值
}
]
ajax: {
//动态获取接口数据，基于select，checkbox,radio
method: "get", //请求方式
url: "www.xx.cn", //接口地址
data: {}, //请求参数
label: "label", //下拉选择框的选择文字
value: "value", //下拉选择的值
callback: function(data) {
//接口返回数据层级处理
return data;
}
}
}
];
}
}
页面上使用：
<elmeForm :formData="formData" ref="reform" labelWidth="90px" v-model="formValue"></elmeForm>
<!--js-->
formValue:{
id:''//这个属性与formData里的field值是一样的，默认为空，即表单的值默认为空，你穿有值，表单就有默认值
}
<!--当你要提交表单时-->
let validate = this.$refs.reform.submitForm();
当你表单校验不通过时，这个validate为false,通过为true
menu组件:
它接收的参数有menuList（它包含着菜单的层级关系），excludeList（剔除高亮的router），onlyOne（是否只展开一个），textColor（菜单的文字颜色（仅支持 hex 格式）），backgroundColor（菜单的背景色），activeColor（当前激活菜单的文字颜色）
menuList: {
type: Array,
default: function() {
return [
{
img: require('../../assets/images/workbench.png'),//图片路径，用require的方式引用，icon与img是二选一的
icon: 'icon-peizhi',//阿里的iconfont，icon与img是二选一的，
index: "workbench",//路由地址
show: true,//是否显示
title: "工作台"//菜单标题
children:[//子菜单可以无限嵌套
{
icon: '巴拉巴拉',
index: "巴拉巴拉",
show: true,
title: "巴拉巴拉",
children:[]
}
]
}
];
}
},
// 一般用在你的路由下还有二级页面，而你希望你路由跳转的你的二级页面，且当前还是父级页面的高亮
excludeList:{
type: Array,
default: function() {
return [];
}
// eg:['member'],那么，当你跳转到member页面的时候，高亮的菜单不会变，还是你之前选择的菜单
},
// 是否只展开一个
onlyOne: {
type: Boolean,
default: function() {
return false;
}
},
// 菜单的文字颜色（仅支持 hex 格式）
textColor: {
type: String,
default: function() {
return "#303133";
}
},
// 菜单的背景色（仅支持 hex 格式）
backgroundColor: {
type: String,
default: function() {
return "#ffffff";
}
},
// 当前激活菜单的文字颜色（仅支持 hex 格式）
activeColor: {
type: String,
default: function() {
return "#409EFF";
}
}
页面上使用时：
<elme-menu :menuList="menuList"></elme-menu>
<!--eg:注意布局，外面在套个div，现在是百分百宽高的-->
table组件:
终于到了表格组件啦，它接收6个参数，分别是：refresh（表格刷新），border（表格边框），paginationJson（表格的分页配置），tableSerach（表格搜索条件），tableAjax（表格的ajax请求），tableData（表格的参数配置）
// 表格刷新，建议传时间戳，因为每次监听到这个值不一样，表格会刷新
refresh: "",
//表格边框线
border: {
type: Boolean,
default: function() {
return true;
}
},
// 分页配置
paginationJson: {
type: Object,
default: function() {
return {
pageSize: [10, 20, 50, 100],//每页多少条
pageAlign: "right",//对齐方式
ispagination: true,//是否展示分页
layout: "total, sizes,jumper, prev, pager, next"//分页布局
};
}
},
// 表格的搜索条件
tableSerach: {},
// 表格AJAX请求配置
tableAjax: {
type: Object,
default: function() {
return {
url: "",//请求地址
method: "post",//请求方式，目前仅支持post的data方式提交数据，get的params方式
pageKey:'pageNum',//字段兼容处理，页数字段名称
sizeKey:'pageSize',//字段兼容处理，条数字段名称
data: {
pageNum: 1,
pageSize: 15
}，
callback: function(data) {
//<!--axios请求后的回调，用于处理各种层级及字段不一的情况-->
return {
tData:data.list
total:data.total
};
}
};
}
},
// table表参数配置
tableData: {
type: Object,
default: function() {
return {
// 表头配置
tHead: [
{
name: "账号",//表格这一列的标题
field: "id",//表格这一列的字段名称
noData: "--",//无数据的兼容处理
type: "function",//目前支持function（字段处理），image（图片类型），btnList（横向按钮），selectBtns（下拉按钮）
width:'250px',//不写为自适应宽度
isHide:false,//是否隐藏
align:'center',//对齐方式
callback:function(cell,rowData){//类型为function，btnList,selectBtns时
//如果为btnList,selectBtns，那么return的数据因为数组：
//let arr = [
// {
// type: "reset",//点击的类型，用于区分不同的按钮点击
// label:'<span>重置</span>'
// }
//];
return cell
}
}
],
// 配置是否显示多选框
isMultiple: false,
// 配置是否显示排序
isRank: true
};
}
}
除了这6个参数外，table组件还有一个点击事件，
tableClick(obj) {
console.log(obj)//obj.rowData为这一行的数据
if (obj.type === "reset") {
//这是重置类型的点击事件
//进行一些交互与增删改查操作
}
}
在页面上使用：
<elme-table
:tableSerach="tableSerach"
:refresh="refresh"
:tableData="tableData"
:tableAjax="tableAjax"
@tableClick="tableClick"
></elme-table>
在基本上介绍完啦，比较帅的小伙伴，点个赞啊，哈哈哈
