1.1.5 • Published 2 years ago
element_package v1.1.5
element ui 二次封装
el-table二次封装
数据示例 prop 字段 label 字段名 date: true 时间戳转年月日 :showOperationColumn="false" 不显示操作列
代码示例
import ComTable from "element_package/common/comTable.vue";
// 数据
this.tableData = {data: records, set: [
{prop: 'no', label: '序号', width: 100, minWidth: 100, fixed: true, date: true, dataValues: { 1: '新增', 2: '修改' }},
{prop: 'projectNo', label: '项目编号'},
]}
// 组件
<com-table :tableData="tableData" :border="true" size="mini" rightWidth="150"
selection showIndex
:stripe="true" :maxHeight="200" :loading="false" :showOperationColumn="false">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">查看</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</com-table>
el-pagination二次封装
page.size:一页显示多少条 page.page:第几页 page.total:共多少条
组件使用示例
<com-pagination
:page-sizes="[5, 10, 20, 50]"
:layout="'total, sizes, prev, pager, next, jumper'"
:total="total"
@sizeChange="handleSizeChange"
@currentChange="handleCurrentChange">
</com-pagination>
el-input二次封装
label 标题
组件使用示例
<com-input
:label="getName('投标邀请回复截止时间', isGov)"
v-model="form.tenderInviteAnswerTime"
type="datetime"
/>
数据字典-行业分类选项
hangyeChange方法传入最后选择的行业字符串 value数据回显
组件使用示例
import ComHangye from "element_package/common/hangyeTypes.vue";
<com-hangye @change="hangyeChange" value="行业"></com-hangye>
components: {ComHangye}
数据字典-城市选择
import comCity from "element_package/common/cityTypes.vue";
<com-city @change="cityChange"></com-city>
components: {comCity}
数据字典-组织机构选择
import comJigou from "element_package/common/jigouTypes.vue";
<com-jigou @change="jigouChange"></com-jigou>
components: {comJigou}
附件上传
fileList需要回显的数据 model上传后存储的文件夹 showUploadBtn是否显示上传按钮
fileTypes限制上传文件类型,默认不限制
import comUpload from "element_package/common/fileUpload.vue"
<com-upload :fileList="form.attachFilePath" model="endumClarify"
:uploadBtnText="上传附件" @fileListDelete="fileListDelete"
:fileTypes="['docx', 'doc']"
:showDelete="false"
:deleteFileMsg="确认删除附件?"
:showUploadBtn="false" @fileListChange="fileAdd"></com-upload>
components: {comUpload}
富文本编辑器
import editorText from '@element_package/common/UEditor.vue'
<editor-text :defaultTemplate="form.announceContent" v-if="showEditor"
@change="form.announceContent = \$event"></editor-text>
form.announceContent = `<h4><span contenteditable="false">2.项目概况与招标范围</span></h4>`
components: {editorText}
操作按钮 根据后台返回权限显示对应按钮
type默认是text
handleView-查看 handleDelete-删除 handleAdd-添加 handleUpdate-修改
runBiaoduanList 跳转标段列表
<com-data-btn
type="text"
:dataChildren="dataChildren"
@handleView="handleDel(scope.row.id)"
@handleDelete="handleDelete(scope.row)"
@handleAdd="handleAdd(scope.row)"
@handleUpdate="handleUpdate(scope.row)"
@runBiaoduanList="runBiaoduanList(scope.row.id)"
/>
部门及人员选择选择
import CompersonSelect from "element_package/common/comPersonSelect"
<CompersonSelect @personChange="form.userIds = $event" />