element-plugin
element-plugin 是基于element-ui开发的一个以提高编码效率、简化调用方式、提高代码维护性、适配屏幕分辨率、聚合基础组件为宗旨的“中间件”组件。
现已开放的可用组件：
ElFormDialog-表单弹窗组件
ElTableColumnPro-表格表头筛选组件
ElInfo-详情展示组件
dependencies
element-ui
vue
安装
npm i elementplugin
引入
1.整体导入：main.js文件里
import ElementPlugin from 'elementplugin';
Vue.use(ElementPlugin);
2.按需导入
import {ElFormDialog, ElTableColumnPro} from 'elementplugin';
Vue.use(ElFormDialog);
Vue.use(ElTableColumnPro);
3.组件内导入
import {ElFormDialog, ElTableColumnPro} from 'elementplugin';
export default {
components: {
ElFormDialog,
ElTableColumnPro
},
...
}
参数说明
1.ElFormDialog 表单弹窗组件
应用示例：
<template>
<div>
<el-button @click="elDialog.visible = true">打开弹窗</el-button>
<el-form-dialog v-if="elDialog.visible" :options="elDialog" ref="formDialog">
<template #footerButtons="scope">
<el-button type="primary" @click="saveEdit(scope.form)">确定</el-button>
<el-button @click="elDialog.visible = false">取消</el-button>
</template>
</el-form-dialog>
</div>
</template>
<script>
export default {
data() {
return {
elDialog: {
title: "", //标题
id: "", //编辑id
width: "800px", //弹窗宽度
formLayout: {
span: 12, //布局采用 24 分栏
labelPosition: "top",//label对齐方式
labelWidth: "80px" //label宽度
},
form: {}, //表单内容
formOptions: {}, //表单内容配置
rules: {}, //表单验证配置
visible: false //弹窗显示
},
// filter 字典类动态获取
activityType:[]
};
},
methods: {
// 添加或编辑
addOrEdit({ id }) {
Project.GetProjectInfoByFwId(id).then(res => {
if (res.success) {
this.initForm(res.data);
this.elDialog.title = "项目编辑";
this.elDialog.id = id;
this.elDialog.visible = true;
}
});
},
// 生成表单
initForm(formData) {
const form = {
id: "",
name: "",
price: "",
type: "",
cascader:"",
date: "",
time: "",
delivery: false,
sex: "",
activityType: [],
file1: [],
file2: [],
remark: ""
};
const formOptions = {
id: {
label: "id",
type: "input",//input类型
placeholder: "",
disabled: true //不显示
},
name: {
label: "名称",
type: "input",
placeholder: "",
readonly: true //显示但不可编辑
},
price: {
label: "价格(元)",
type: "number",//数字类型
placeholder: ""
},
type: {
label: "类型",
type: "select",//select类型
placeholder: "请选择类型",
options: [
{ name: "食品", value: "0" },
{ name: "电器", value: "1" }
]
},
cascader: {
label: "级联选择器",
type: "cascader",//级联选择器
placeholder: "请选择类型",
options: [
{
Id: "zhinan",
TypeName: "指南",
Children: [
{
Id: "shejiyuanze",
TypeName: "设计原则",
Children: [
{
Id: "yizhi",
TypeName: "一致"
},
{
Id: "fankui",
TypeName: "反馈"
}
]
}
]
}
],
defaultProps: {
children: "Children",
label: "TypeName",
value: "Id",
emitPath: false
}
},
date: {
label: "日期",
type: "date",//date类型
placeholder: "YYYY-MM-DD"
},
time: {
label: "时间",
type: "time",//time类型
placeholder: "HH:MM:SS"
},
delivery: {
label: "即时配送",
type: "switch"//switch类型
},
sex: {
label: "性别",
type: "radio",//radio类型
options: [
{ name: "男", value: "0" },
{ name: "女", value: "1" }
]
},
activityType: {
label: "活动类型",
type: "checkbox",//checkbox类型
options: this.activityType.options //字典-类型
},
file1: {
label: "附件类型1",
type: "file",//file类型
uploadUrl: "https://jsonplaceholder.typicode.com/posts/",
span: 17
},
file2: {
label: "可研报告",
type: "file",
uploadUrl: "https://jsonplaceholder.typicode.com/posts/",
span: 17
},
remark: {
label: "备注",
type: "textarea",//textarea类型
placeholder: "..."
}
};
// 表单赋值
if (formData) {
for (const key in form) {
form[key] = formData[key];
}
}
// 表单内容
this.elDialog.form = form;
// 表单配置
this.elDialog.formOptions = formOptions;
// 表单验证
this.elDialog.rules = {
price: [
{ required: true, message: "控制价不能为空" },
{ type: "number", message: "控制价必须为数字值" }
],
type: {
required: true,
message: "请选择项目类型",
trigger: "blur"
}
};
},
// 保存或添加
saveEdit(form) {
this.$refs.formDialog.validateForm().then(res => {
let params = form;
if (this.elDialog.id) {
params = Object.assign({ Id: this.elDialog.id }, form);
}
Project.SaveProject(params).then(res => {
this.$message({
message: res.msg,
type: "success"
});
this.elDialog.visible = false;
// 更新列表
this.getProjectList();
});
});
},
// 字典-活动类型
getActivityType() {
Common.GetEnumList("ProjectType").then(res => {
this.activityType.options = res.data;
});
}
},
mounted(){
this.getActivityType();
}
};
</script>
2.ElTableColumnPro 表头筛选组件
示例：
<template>
<div class="table-container">
<el-table
:data="tableData"
style="width: 100%;"
:height="tableHeight"
@sort-change="handleSortChange"
>
<el-table-column
align="center"
prop="bh"
label="项目编码"
width="200"
></el-table-column>
<el-table-column-pro
prop="xmmc"
label="项目名称"
align="center"
header-align="center"
placeholder="请输入项目名称"
:callback="getTableData"
renderType="input"
:param.sync="PrjName"
>
</el-table-column-pro>
<el-table-column-pro
prop="PrjType"
label="项目类型"
placeholder="请选择项目类型"
:selectList="PrjType.options"
:callback="getTableData"
renderType="select"
:param.sync="PrjType.value"
:width="140"
:filterIcon="'iconfont icon-filter'"
:isClear="true"
>
</el-table-column-pro>
<el-table-column
align="center"
prop="ContractAmount"
label="合同价"
sortable="custom"
></el-table-column>
<el-table-column
align="center"
prop="PaymentAmount"
label="已付款金额"
sortable="custom"
></el-table-column>
<el-table-column-pro
prop="PaymentAmount"
label="起止日期"
align="center"
header-align="center"
placeholder="请选择时间范围"
:callback="getTableData"
renderType="datetimerange"
:param.sync="PaymentAmount"
>
</el-table-column-pro>
<el-table-column-pro
prop="StatusName"
align="center"
label="项目状态"
placeholder="请选择项目状态"
:selectList="Status.options"
:callback="getTableData"
renderType="select"
:param.sync="Status.value"
:width="140"
:filterIcon="'iconfont icon-filter'"
:isClear="true"
>
</el-table-column-pro>
<el-table-column align="center" prop="FWPrjId" label="操作" width="180">
<template v-slot="scope">
<el-button
type="primary"
:size="size"
@click="toEdit({ id: scope.row.FWPrjId })"
>编辑</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
class="pt-3 text-right"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
<!-- 表单弹窗 -->
<ElFormDialog
v-if="elDialog.visible"
:options="elDialog"
ref="formDialog"
>
<template #footerButtons="scope">
<el-button type="primary" @click="saveEdit(scope.form)"
>确定</el-button
>
<el-button @click="elDialog.visible = false">取消</el-button>
</template>
</ElFormDialog>
</div>
</template>
<script>
export default {
data() {
return {
size: "mini",
tableHeight: window.innerHeight - 50,
tableData: [],
// page
currentPage: 1,
total: 1,
pageSize: 10,
// filter
PrjName: "456465",
PaymentAmount:"",
PrjType: {
value: "",
options: [
{ value: 1, name: "维修项目", tagType: "danger" },
{ value: 2, name: "新建项目", tagType: "wanning" },
{ value: 3, name: "技改项目", tagType: "info" },
{ value: 4, name: "拆除项目", tagType: "success" }
]
},
Status: {
value: "",
options: [
{ value: 1, name: "项目准备" },
{ value: 2, name: "项目招标" },
{ value: 3, name: "项目招标" },
{ value: 4, name: "项目完成" }
]
},
Sort: "",
Order: ""
}
},
methods: {
// change每页显示条数
handleSizeChange(val) {
this.pageSize = val;
this.getTableData();
},
// 翻页
handleCurrentChange(val) {
this.currentPage = val;
this.getTableData();
},
//排序
handleSortChange({ column, prop, order }) {
const sortMap = {
ascending: "ASC",
descending: "DESC"
};
this.Sort = prop;
this.Order = order ? sortMap[order] : order;
this.getTableData();
},
// 获取表格数据
getTableData() {
Project.GetProjectList({
Year: "",
PrjName: this.PrjName,
PrjType: this.PrjType.value,
Status: this.Status.value,
Sort: this.Sort,
Order: this.Order,
PageIndex: this.currentPage,
PageSize: this.pageSize
}).then(res => {
this.total = res.data.Pager.PageCount;
this.tableData = res.data.PageTable;
});
}
}
}
3.ElInfo 详情组件
此组件默认支持图片预览插件vue-photo-preview，如果你想进行图片预览，只需项目中引用vue-photo-preview。
示例：
<template>
<!-- 详情弹窗 -->
<el-dialog
title="查看"
:visible.sync="elInfo.visible"
width="80%"
class="text-left"
>
<el-info labelClass="text-justify" labelWidth="80px" :datas="elInfo.datas"></ el-info>
</el-dialog>
</template>
export default {
data() {
return {
elInfo: {
visible: false,
datas: [
{
label: "姓名",
value: "小明"
},
{
label: "性别",
value: "男"
},
{
label: "年龄",
value: "18"
},
{
label: "单身",
value: "否"
},
{
label: "备注",
value: "小明"
},
{
type: "images",
label: "图片列表",
value: ["https://upload.jianshu.io/users/upload_avatars/19764802/ d192f539-1942-4504-aadd-9d6bcd34ed33?imageMogr2/auto-orient/strip|imageView2/ 1/w/240/h/240","https://upload.jianshu.io/users/upload_avatars/19764802/ d192f539-1942-4504-aadd-9d6bcd34ed33?imageMogr2/auto-orient/strip|imageView2/ 1/w/240/h/240"],
},
{
type: "list",
label: "附件列表",
value: ["附件1.doc","附件2.xlxs","附件3.jpg","附件4.pdf"],
}
]
}
}
}
}
