日常使用中封装的一些组件,正常使用可以,没有达到很完美的状态,日常维护吧,有问题的地方不定时修改吧,这个是基于element-admin封装的自己可以随意的更改(我适配了一些权限以及字体大小的功能)
封装常用的表单使用的数据
<template>
<!-- 表单搜索的组件 -->
<el-row class="tableform">
<el-form
:model="tableform.formdata"
:rules="tableform.rules"
ref="ruleForm"
:label-position="tableform.styledata.position"
:style="{ width: tableform.styledata.width }"
@submit.native.prevent
>
<!-- 表单内容 -->
<el-col
v-for="(item, index) in tableform.formlist"
:key="index"
:xs="24"
:sm="item.width + 12"
:md="item.width + 4"
:lg="item.width"
:xl="item.width"
>
<el-form-item
v-hasPermi="[item.hasPermi]"
:label-width="item.labelwidth"
:style="{ fontSize: size + 'px' }"
:label="item.name"
:prop="item.id"
:class="{ disinput: item.disabled }"
>
<!-- 输入框,文本框种类0 -->
<el-input
:disabled="item.disabled"
v-if="item.mold === 0"
v-model.trim="tableform.formdata[item.id]"
:maxlength="item.max"
:type="item.type"
:clearable="item.clearable"
:placeholder="!item.disabled ? item.plac + item.name : ''"
:show-word-limit="item.type === 'textarea'"
:rows="item.rows"
:autosize="item.type === 'textarea'"
:show-password="item.type === 'password'"
:prefix-icon="item.prefix"
:suffix-icon="item.suffix"
@clear="changevalue(index)"
@input="changevalue(index)"
@keyup.enter.native="btndown('page:table:query')"
/>
<!-- 下拉菜单种类1 -->
<el-select
@change="changevalue(index)"
:multiple="item.multiple"
:disabled="item.disabled"
:collapse-tags="item.multiple"
:clearable="item.clearable"
:filterable="item.filterable"
:multiple-limit="item.multiplelimit"
v-if="item.mold === 1"
v-model="tableform.formdata[item.id]"
:placeholder="!item.disabled ? item.plac + item.name : ''"
>
<!-- 下拉菜单选择 -->
<el-option
v-for="(ems, ids) in item.list"
:key="ids"
:label="ems[item.label]"
:value="ems[item.value]"
/>
</el-select>
<!-- 时间选择器 种类2 -->
<el-time-picker
@change="changevalue(index)"
v-if="item.mold === 2"
v-model="tableform.formdata[item.id]"
:placeholder="!item.disabled ? item.plac + item.name : ''"
:is-range="item.range"
:disabled="item.disabled"
:format="item.format"
:value-format="item.valueformat"
/>
<!-- 日期选择器 种类3 -->
<el-date-picker
@change="changevalue(index)"
v-if="item.mold === 3"
:type="item.type"
v-model="tableform.formdata[item.id]"
:placeholder="!item.disabled ? item.plac + item.name : ''"
:disabled="item.disabled"
:format="item.format"
:value-format="item.valueformat"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
<!-- switch开关 种类4 -->
<el-switch
@change="changevalue(index)"
v-if="item.mold === 4"
:disabled="item.disabled"
v-model="tableform.formdata[item.id]"
/>
<!-- 多选 种类5 -->
<el-checkbox-group
@change="changevalue(index)"
v-if="item.mold === 5"
:disabled="item.disabled"
v-model="tableform.formdata[item.id]"
>
<!-- 多选内容 -->
<el-checkbox
v-for="(ems, ids) in tableform.formlist"
:key="ids"
:label="ems[item.label]"
/>
</el-checkbox-group>
<!-- 单选 种类6 -->
<el-radio-group
@change="changevalue(index)"
v-if="item.mold === 6"
:disabled="item.disabled"
v-model="tableform.formdata[item.id]"
>
<!-- 单选内容 -->
<el-radio
v-for="(ems, ids) in tableform.formlist"
:key="ids"
:label="ems[item.label]"
/>
</el-radio-group>
<!-- 其他类型传7 -->
<div v-if="item.mold === 7">
<slot :datas="item" />
</div>
</el-form-item>
</el-col>
<!-- 按钮 定位 -->
<el-form-item class="btn" :class="tableform.styledata.btntype">
<el-button
@click="btndown(item.hasPermi)"
v-for="(item, index) in tableform.btnlist"
:key="index"
:type="item.type"
:icon="item.icon"
v-hasPermi="[item.hasPermi]"
:plain="item.plain"
>{{ item.name }}</el-button
>
</el-form-item>
</el-form>
</el-row>
</template>
<script>
import { debtimeout, throttle, setfontsize } from "@/utils";
export default {
props: {
// 传入的表单数组配置
tableform: {
typeL: [Object],
},
},
data() {
return {
size: 0, //字体大小
};
},
created() {
this.size = setfontsize(this.$ELEMENT.size); //获取字体大小
},
methods: {
// 按钮按下的时候
btndown(hasPermi) {
var type = hasPermi.split(":")[2];
if (type === "query") {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
this.$emit("changetype", type);
} else {
return false;
}
});
} else {
throttle(500).then(() => {
this.$emit("changetype", type);
});
}
},
// form的值改变的时候触发
changevalue(type) {
debtimeout(500).then(() => {
this.$emit("change", this.tableform.formdata, type);
});
},
},
};
</script>
有些节流防抖的就没放这里,等哪天专门写一篇封装的方法
一些参数大家看elementui官方就行
接下来就是使用方法
引入一个json配置就行,因为比较多,注意的是,json文件的修改是全局的,如果多个地方使用的话要记得深拷贝一下**JSON.parse(JSON.stringify(json文件)**这样就行
<template>
<div >
<!-- 表单内容 -->
<tableform :tableform="listform" @changetype="changetype" />
</div>
</template>
<script>
//表单内容
import { listform } from "../../../assets/json/route/from.json";
export default {
data() {
return {
listform: listform
};
},
methods: {
// 表单按钮
changetype(e) {
if (e === "query") {
//这里写一下表单的方法
}
},
};
</script>
传入的json是这样
可能有点麻烦,但开发速度开始会节省一点,毕竟ctrl+c,ctrl+v
{
"listform": {
//这里就是表单数组
"formlist": [
{
"id": "saleNum",
"name": "合同编号",
"disabled": false,
"mold": 0,
"max": -1,
"plac": "请输入",
"type": "text",
"clearable": true,
"rows": 1,
"prefix": "",
"suffix": "",
"width": 6,
"labelwidth": "80px",
"hasPermi": ""
},
{
"id": "deptIds",
"name": "部门",
"disabled": false,
"multiple": true,
"clearable": true,
"collapse": false,
"plac": "请选择",
"filterable": false,
"mold": 7,
"list": [],
"multiplelimit": 0,
"label": "dictLabel",
"value": "dictValue",
"width": 6,
"labelwidth": "80px",
"hasPermi": "orderform:manage:replaceDept"
}
],
//这里是表单数组
"formdata": {
"pageNum": 1,
"pageSize": 10,
"taskNum": null,
"deptIds":null
},
//这里是按钮数组
"btnlist": [
{
"icon": "el-icon-search",
"type": "primary",
"name": "搜索",
"plain": false,
"hasPermi": "orderform:manage:query",
"round": false
}
],
//这里是表单样式的一些配置
"styledata": {
"position": "left",
"width": "100%",
"btntype": "right bottom"
},
//这里是正则
"rules": {}
},
}
就是这样,下班!!!