当前位置: 首页 > news >正文

Vue2-封装一个看起来像左右分布表格的表单组件

效果

1. 无编辑权限:显示普通表格

2. 有编辑权限:根据配置显示编辑控件

核心代码

        <el-form:ref="formRef":model="data":label-width="labelWidth"label-position="left"target="stop":rules="rules"><el-rowv-for="(row, rowIndex) in items":key="rowIndex":gutter="0":class="`form-row-${rowIndex}`"><el-colv-for="(item, index) in isArray(row)":key="index":span="item.span || 24 / row.length":class="item.colClassName || null"style="padding: 0"><el-form-item:key="item.label || index":style="item.styles":class="[isRequire(item) ? 'form-item-required' : 'form-item-notRequired',!item.label ? 'hidden-form-item-label' : '',item.className,item.attrs && item.attrs.disabled ? 'hidden-tips' : '',]":label="item.label":prop="item.prop":rules="item.rules":label-width="item.labelWidth || '120px'":name="item.prop"><!-- 只读模式显示字段值 --><div v-if="!hasEditPermission" class="readonly-value"><slotv-if="item.textSlot":row="data":name="item.textSlotName"/><span v-else>{{ data[item.prop] }}</span></div><template v-else><!--自定义插槽--><slotv-if="item.type == $const.DialogCompType.slot":item="item":name="item.slotName"/><!--单行输入框--><el-inputv-if="item.type == $const.DialogCompType.input"v-model="data[item.prop]":name="item.prop"auto-complete="on"class="item-inputs":style="{ width: `${item.width}` }":placeholder="placeholderFormate(item)"v-bind="item.attrs"v-on="item.listeners"><template v-if="item.slot" :slot="item.slotName">{{item.slotContent}}</template></el-input><!--远程搜索选择器--><remote-search-selectorv-if="item.type == $const.DialogCompType.remoteSearchSelector":init-value="data[item.prop]"class="item-inputs":placeholder="placeholderFormate(item)":newComp="true"v-bind="item.attrs":options="item.optionList":show-value="item.showValue":remote-methods="item.remoteMethod":style="{ width: `${item.width}`}"v-on="item.listeners"@valueChange="remoteSearchValueChage($event, data, item)"/><!--数字输入--><el-input-numberv-if="item.type == $const.DialogCompType.number"v-model="data[item.prop]"class="item-inputs":style="{ width: `${item.width}` }":placeholder="placeholderFormate(item)"v-bind="item.attrs"v-on="item.listeners"/><!--多行输入--><el-inputv-if="item.type == $const.DialogCompType.textarea"v-model="data[item.prop]":name="item.prop"auto-complete="on"class="item-inputs":style="{ width: `${item.width}` }"type="textarea":placeholder="placeholderFormate(item)"v-bind="item.attrs":autosize="item.attrs && item.attrs.autosize ? item.attrs.autosize : true"v-on="item.listeners"/><!--日期选择器--><el-date-pickerv-if="item.type == $const.DialogCompType.datePicker"v-model="data[item.prop]"class="item-inputs":type="(item.attrs && item.attrs.type) || 'date'":placeholder="placeholderFormate(item)":style="{ width: `${item.width}` }"v-bind="item.attrs"v-on="item.listeners"/><!--日期时间选择器--><el-date-pickerv-if="item.type == $const.DialogCompType.dateTime"v-model="data[item.prop]"class="item-inputs"type="datetime":placeholder="placeholderFormate(item)":style="{ width: `${item.width}` }"v-bind="item.attrs"v-on="item.listeners"/><!--日期时间选择器-带标记封装组件--><date-picker-wrapv-if="item.type == $const.DialogCompType.datePickerColor":date="data[item.prop]"class="item-inputs":placeholder="placeholderFormate(item)":style="{ width: `${item.width}` }"v-bind="item.attrs"v-on="item.listeners"/><!--时间范围选择--><el-date-pickerv-if="item.type == $const.FormCompType.daterange"v-model="data[item.prop]":type="(item.attrs && item.attrs.type) || 'daterange'":placeholder="placeholderFormate(item)":style="{ width: `${item.width || width || '100%'}` }":picker-options="{ disabledDate:daterangeDisabledDate }"v-bind="item.attrs"v-on="item.listeners"@change="eventHandler($event, {name: 'change',events: item.listeners,item,})"/><!-- 日期和时间范围选择  --><el-date-pickerv-if="item.type == $const.FormCompType.datetimerange"v-model="data[item.prop]"type="datetimerange":placeholder="placeholderFormate(item)":style="{ width: `${item.width || width || '100%'}` }"v-bind="item.attrs"v-on="item.listeners"@change="eventHandler($event, {name: 'change',events: item.listeners,item,})"/><!--开关--><el-switchv-if="item.type == $const.DialogCompType.switch"v-model="data[item.prop]"v-bind="item.attrs"v-on="item.listeners"/><!--下拉菜单--><el-dropdownv-if="item.type == $const.DialogCompType.dropdown"v-bind="item.attrs"v-on="item.listeners"><el-button v-bind="item.dropdownButtonsAttrs">{{ item.dropdownLabel }}<i class="el-icon-arrow-down el-icon--right" /></el-button><el-dropdown-menu slot="dropdown"><el-dropdown-itemv-for="dItem in item.dropdownItem":key="dItem.label"v-bind="dItem.attrs"v-on="dItem.listeners">{{ dItem.label }}</el-dropdown-item></el-dropdown-menu></el-dropdown><!--普通下拉选择器--><SelectorWrapv-if="item.type == $const.DialogCompType.select":key="item.prop":item="item":data="data"v-bind="item.attrs"v-on="item.listeners"/><!--单选框--><el-radio-groupv-if="item.type == $const.DialogCompType.radio"v-model="data[item.prop]"class="item-inputs":style="{ width: `${item.width}` }"v-bind="item.attrs"v-on="item.listeners"><el-radiov-for="option in item.optionList":key="option.id || option.value":label="option.value">{{ option.label }}</el-radio></el-radio-group><!--滑动条--><el-sliderv-if="item.type == $const.DialogCompType.slider"v-model="data[item.prop]"class="item-inputs"v-bind="item.attrs"v-on="item.listeners"/><!--警告--><el-alertv-if="item.type == $const.DialogCompType.alert"v-bind="item.attrs"/><el-dividerv-if="item.type == $const.DialogCompType.divider"v-bind="item.attrs"><span v-if="item.tips">{{ item.tips }}</span></el-divider><!--文件上传--><file-uploadv-if="item.type == $const.DialogCompType.files"class="item-inputs"v-bind="item.attrs"v-on="item.listeners"/><!--按钮组--><divv-if="item.type == $const.DialogCompType.buttons"class="dialog-buttons":style="{display: 'flex','justify-content': buttonsAlign[item.align] || 'flex-end',}"><el-buttonv-for="but in item.buttons":key="but.label":type="but.type"v-bind="but.attrs"size="small"@click="submitValidate(but.validate, but.reset, but.event)">{{ but.label }}</el-button></div><!--富文本编辑器--><tinymcev-if="item.type == $const.DialogCompType.editor"v-model="data[item.prop]":height="item.height"/></template></el-form-item></el-col></el-row></el-form>
http://www.dtcms.com/a/306216.html

相关文章:

  • python基础:用户输入和 while 循环
  • 学习日志22 python
  • 2024 年 NOI 最后一题题解
  • 从0到1学PHP(八):PHP 与 MySQL 数据库:数据持久化存储
  • Spring AI 海运管理应用第2部分
  • 关于市场成交量和散户操作错误率的提问和思考。
  • QT笔记(2)——vscode + CMAKE + qtcreate的操作方式
  • 【PostgreSQL内核学习:WindowAgg 帧优化与节点去重】
  • 【Unity3D实例-功能-移动】复杂移动(Blend Tree方式)
  • 169-Django二手交易校园购物系统开发分享
  • django-4事务
  • 游戏盾是如何做到免疫攻击的
  • Android自定义游戏view积累
  • 从混乱走向高效:重塑企业IT服务管理的未来路径
  • 【网络运维】Linux:软件包管理
  • python案例分析:基于抖音评论的文本分析,使用svm算法进行情感分析以及LDA主题分析,准确率接近90%
  • Qt Quick 可视化组件应用
  • 应用药品 GMP 证书识别技术,实现证书信息的自动化、精准化提取与核验
  • OriGene:一种可自进化的虚拟疾病生物学家,实现治疗靶点发现自动化
  • RK3568下的进程间通信:基于UDP的mash网络节点通信
  • Java注解与反射:从自定义注解到框架设计原理
  • 双线串行的 “跨界对话”:I2C 与 MDIO 的异同解析
  • 详细聊下easyexcel导出
  • 实例教学FPN原理与PANet,Pytorch逐行精讲实现
  • 【源力觉醒 创作者计划 】文心大模型4.5系列与DeepSeek、通义千问Qwen 3.0深度对比分析
  • 人工智能与安全:智能安防的创新与伦理边界
  • pycharm中debug的一些小细节
  • 压敏电阻的选型与计算分析
  • YOLO-01目标检测基础
  • 电子对抗技术在特种车辆中的实战应用与发展解析