在el-form中添加 class=“edit-el-form“ 属性可以缩短el-dialog中的el-form的每一个el-form-item之间的间隔

最新推荐文章于 2024-12-24 16:29:29 发布
原创 最新推荐文章于 2024-12-24 16:29:29 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #vue.js #前端

在Vue.js中，通过在el-form组件上添加class=edit-el-form可以修改el-dialog内的el-form-item间距，具体表现为缩短每个表单项之间的距离，提供更紧凑的布局。
  • 在el-form中添加 class=“edit-el-form” 属性可以缩短el-dialog中的el-form的每一个el-form-item之间的间隔：
 <el-dialog
     width="100%"
     :title="title"
     :visible.sync="dialogVisible"
     :before-close="closeDialog"
     :close-on-click-modal="false"
     fullscreen>
	    <el-form 
	    	class="edit-el-form"
	    	ref="form" 
	    	label-width="80px" 
	    	style="border:1px solid #C4E1C5;padding:20px;">
			<el-form-item label="姓名">
			  <el-input v-model="user.name"></el-input>
			</el-form-item>
			<el-form-item label="年龄">
			  <el-input v-model="user.age"></el-input>
			</el-form-item>
			<el-form-item>
			  <el-button type="primary">确认</el-button>
			  <el-button>取消</el-button>
			</el-form-item>
	    </el-form>
</el-dialog>
JCjunior
关注
vue2：如何动态控制el-form-item之间的行间距或label的位置
l_q_l的专栏
02-06 1285
某页面有查看和编辑两种状态：编辑：查看：可以看到，查看时，行间距太大导致页面不紧凑，所以希望缩小查看是的行间距。行间距通常是通过 CSS 的 或 属性来控制的。在 Element UI 的样式表中， 的下边距（）通常被设置为 ，这可以视为一种“行间距”。 所以要缩小行间距，就要改变这个值，但是又不希望改变编辑状态的默认值，所以，使用动态class，如下： 2、动态加载class :class="formEditable?'':'el-form-item-view'" ：编辑状态下，不指定
修改查询栏el-from表单标题字体、输入框(控件)之间的间距
树上骑个猴的博客
12-30 5336
<el-card class="box"> <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="70px" class="remove-font-weight"> <el-form-item label="用户名称" prop="userName"> <el-input v...
Element el-form 表单详解
编程副队长
10-15 4万+
本文目录1. 前言2. 基本用法3. 行内表单4. 标签对齐方式5. 调整尺寸6. 小结 1. 前言 表单是使用频率非常高的组件了，HTML默认提供的表单是没啥样式的，而Element对表单提供了封装形成了el-form组件，使整个表单的样式整齐划一。 本篇就来介绍下表单的使用，主要介绍的是样式方面的使用。 2. 基本用法 代码： 基本用法： <el-form ref="form" label-width="80px" style="border:1px solid #C4E1C5;padd
调整el-form行距
Cabriella_的博客
02-20 3436
解决el-form行距
el-form-item 行距样式
07-08 1923
There is no nutrition in the blog content. After reading it, you will not only suffer from malnutrition, but also impotence. The blog content is all parallel goods. Those who are worried about being cheated should leave quickly.
<template> <div class="app-container"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"> <el-form-item label="菜单名称" prop="menuName"> <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="状态" prop="status"> <el-select v-model="queryParams.status" placeholder="菜单状态" clearable> <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:menu:add']" >新增</el-button> </el-col> <el-col :span="1.5"> <el-button type="info" plain icon="el-icon-sort" size="mini" @click="toggleExpandAll" >展开/折叠</el-button> </el-col> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-if="refreshTable" v-loading="loading" :data="menuList" row-key="menuId" :default-expand-all="isExpandAll" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" > <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column> <el-table-column prop="icon" label="图标" align="center" width="100"> <template slot-scope="scope"> <svg-icon :icon-class="scope.row.icon" /> </template> </el-table-column> <el-table-column prop="orderNum" label="排序" width="60"></el-table-column> <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column> <el-table-column prop="status" label="状态" width="80"> <template slot-scope="scope"> <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/> </template> </el-table-column> <el-table-column label="创建时间" align="center" prop="createTime"> <template slot-scope="scope"> <span>{{ parseTime(scope.row.createTime) }}</span> </template> </el-table-column> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']" >修改</el-button> <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']" >新增</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']" >删除</el-button> </template> </el-table-column> </el-table> <!-- 添加或修改菜单对话框 --> <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body> <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-row> <el-col :span="24"> <el-form-item label="上级菜单" prop="parentId"> <treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true" placeholder="选择上级菜单" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-form-item label="菜单类型" prop="menuType"> <el-radio-group v-model="form.menuType"> <el-radio label="M">目录</el-radio> <el-radio label="C">菜单</el-radio> <el-radio label="F">按钮</el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12" v-if="form.menuType != 'F'"> <el-form-item label="菜单图标" prop="icon"> <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()" > <IconSelect ref="iconSelect" @selected="selected" :active-icon="form.icon" /> <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly> <svg-icon v-if="form.icon" slot="prefix" :icon-class="form.icon" style="width: 25px;" /> <i v-else slot="prefix" class="el-icon-search el-input__icon" /> </el-input> </el-popover> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="显示排序" prop="orderNum"> <el-input-number v-model="form.orderNum" controls-position="right" :min="0" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="菜单名称" prop="menuName"> <el-input v-model="form.menuName" placeholder="请输入菜单名称" /> </el-form-item> </el-col> <el-col :span="12" v-if="form.menuType == 'C'"> <el-form-item prop="routeName"> <el-input v-model="form.routeName" placeholder="请输入路由名称" /> <span slot="label"> <el-tooltip content="默认不填则和路由地址相同：如地址为：`user`，则名称为`User`（注意：为避免名字的冲突，特殊情况下请自定义，保证唯一性）" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 路由名称 </span> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12" v-if="form.menuType != 'F'"> <el-form-item prop="isFrame"> <span slot="label"> <el-tooltip content="选择是外链则路由地址需要以`http(s)://`开头" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 是否外链 </span> <el-radio-group v-model="form.isFrame"> <el-radio label="0">是</el-radio> <el-radio label="1">否</el-radio> </el-radio-group> </el-form-item> </el-col> <el-col :span="12" v-if="form.menuType != 'F'"> <el-form-item prop="path"> <span slot="label"> <el-tooltip content="访问的路由地址，如：`user`，如外网地址需内链访问则以`http(s)://`开头" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 路由地址 </span> <el-input v-model="form.path" placeholder="请输入路由地址" /> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12" v-if="form.menuType == 'C'"> <el-form-item prop="component"> <span slot="label"> <el-tooltip content="访问的组件路径，如：`system/user/index`，默认在`views`目录下" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 组件路径 </span> <el-input v-model="form.component" placeholder="请输入组件路径" /> </el-form-item> </el-col> <el-col :span="12" v-if="form.menuType != 'M'"> <el-form-item prop="perms"> <el-input v-model="form.perms" placeholder="请输入权限标识" maxlength="100" /> <span slot="label"> <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasPermi('system:user:list')`)" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 权限字符 </span> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12" v-if="form.menuType == 'C'"> <el-form-item prop="query"> <el-input v-model="form.query" placeholder="请输入路由参数" maxlength="255" /> <span slot="label"> <el-tooltip content='访问路由的默认传递参数，如：`{"id": 1, "name": "ry"}`' placement="top"> <i class="el-icon-question"></i> </el-tooltip> 路由参数 </span> </el-form-item> </el-col> <el-col :span="12" v-if="form.menuType == 'C'"> <el-form-item prop="isCache"> <span slot="label"> <el-tooltip content="选择是则会被`keep-alive`缓存，需要匹配组件的`name`和地址保持一致" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 是否缓存 </span> <el-radio-group v-model="form.isCache"> <el-radio label="0">缓存</el-radio> <el-radio label="1">不缓存</el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12" v-if="form.menuType != 'F'"> <el-form-item prop="visible"> <span slot="label"> <el-tooltip content="选择隐藏则路由将不会出现在侧边栏，但仍然可以访问" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 显示状态 </span> <el-radio-group v-model="form.visible"> <el-radio v-for="dict in dict.type.sys_show_hide" :key="dict.value" :label="dict.value" >{{dict.label}}</el-radio> </el-radio-group> </el-form-item> </el-col> <el-col :span="12"> <el-form-item prop="status"> <span slot="label"> <el-tooltip content="选择停用则路由将不会出现在侧边栏，也不能被访问" placement="top"> <i class="el-icon-question"></i> </el-tooltip> 菜单状态 </span> <el-radio-group v-model="form.status"> <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value" >{{dict.label}}</el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> </div> </template> <script> import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu" import Treeselect from "@riophae/vue-treeselect" import "@riophae/vue-treeselect/dist/vue-treeselect.css" import IconSelect from "@/components/IconSelect" export default { name: "Menu", dicts: ['sys_show_hide', 'sys_normal_disable'], components: { Treeselect, IconSelect }, data() { return { // 遮罩层 loading: true, // 显示搜索条件 showSearch: true, // 菜单表格树数据 menuList: [], // 菜单树选项 menuOptions: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 是否展开，默认全部折叠 isExpandAll: false, // 重新渲染表格状态 refreshTable: true, // 查询参数 queryParams: { menuName: undefined, visible: undefined }, // 表单参数 form: {}, // 表单校验 rules: { menuName: [ { required: true, message: "菜单名称不能为空", trigger: "blur" } ], orderNum: [ { required: true, message: "菜单顺序不能为空", trigger: "blur" } ], path: [ { required: true, message: "路由地址不能为空", trigger: "blur" } ] } } }, created() { this.getList() }, methods: { // 选择图标 selected(name) { this.form.icon = name }, /** 查询菜单列表 */ getList() { this.loading = true listMenu(this.queryParams).then(response => { this.menuList = this.handleTree(response.data, "menuId") this.loading = false }) }, /** 转换菜单数据结构 */ normalizer(node) { if (node.children && !node.children.length) { delete node.children } return { id: node.menuId, label: node.menuName, children: node.children } }, /** 查询菜单下拉树结构 */ getTreeselect() { listMenu().then(response => { this.menuOptions = [] const menu = { menuId: 0, menuName: '主类目', children: [] } menu.children = this.handleTree(response.data, "menuId") this.menuOptions.push(menu) }) }, // 取消按钮 cancel() { this.open = false this.reset() }, // 表单重置 reset() { this.form = { menuId: undefined, parentId: 0, menuName: undefined, icon: undefined, menuType: "M", orderNum: undefined, isFrame: "1", isCache: "0", visible: "0", status: "0" } this.resetForm("form") }, /** 搜索按钮操作 */ handleQuery() { this.getList() }, /** 重置按钮操作 */ resetQuery() { this.resetForm("queryForm") this.handleQuery() }, /** 新增按钮操作 */ handleAdd(row) { this.reset() this.getTreeselect() if (row != null && row.menuId) { this.form.parentId = row.menuId } else { this.form.parentId = 0 } this.open = true this.title = "添加菜单" }, /** 展开/折叠操作 */ toggleExpandAll() { this.refreshTable = false this.isExpandAll = !this.isExpandAll this.$nextTick(() => { this.refreshTable = true }) }, /** 修改按钮操作 */ handleUpdate(row) { this.reset() this.getTreeselect() getMenu(row.menuId).then(response => { this.form = response.data this.open = true this.title = "修改菜单" }) }, /** 提交按钮 */ submitForm: function() { this.$refs["form"].validate(valid => { if (valid) { if (this.form.menuId != undefined) { updateMenu(this.form).then(response => { this.$modal.msgSuccess("修改成功") this.open = false this.getList() }) } else { addMenu(this.form).then(response => { this.$modal.msgSuccess("新增成功") this.open = false this.getList() }) } } }) }, /** 删除按钮操作 */ handleDelete(row) { this.$modal.confirm('是否确认删除名称为"' + row.menuName + '"的数据项？').then(function() { return delMenu(row.menuId) }).then(() => { this.getList() this.$modal.msgSuccess("删除成功") }).catch(() => {}) } } } </script> 美化
09-24
<el-form-item label="菜单名称" prop="menuName"> <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable prefix-icon="el-icon-search" style="width: 240px" @keyup.enter....
<template> <div class="app-container"> <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="计划号" prop="planNo"> <el-input v-model="queryParams.planNo" placeholder="请输入计划号" clearable @keyup.enter="handleQuery" /> </el-form-item> <el-form-item label="订单编号" prop="orderId"> <el-input v-model="queryParams.orderId" placeholder="请输入订单编号" clearable @keyup.enter="handleQuery" /> </el-form-item> <el-form-item label="物料编号" prop="materialId"> <el-input v-model="queryParams.materialId" placeholder="请输入物料编号" clearable @keyup.enter="handleQuery" /> </el-form-item> <el-form-item label="BOM" prop="bomId"> <el-input v-model="queryParams.bomId" placeholder="请输入BOM" clearable @keyup.enter="handleQuery" /> </el-form-item> <el-form-item label="生产线" prop="productLineId"> <el-input v-model="queryParams.productLineId" placeholder="请输入生产线" clearable @keyup.enter="handleQuery" /> </el-form-item> <el-form-item label="工艺" prop="processId"> <el-input v-model="queryParams.processId" placeholder="请输入工艺" clearable @keyup.enter="handleQuery" /> </el-form-item> <el-form-item label="项目编号" prop="projectId"> <el-input v-model="queryParams.projectId" placeholder="请输入项目编号" clearable @keyup.enter="handleQuery" /> </el-form-item> <el-form-item label="待产数量" prop="requireQuantity"> <el-input v-model="queryParams.requireQuantity" placeholder="请输入待产数量" clearable @keyup.enter="handleQuery" /> </el-form-item> <el-form-item label="已产数量" prop="productQuantity"> <el-input v-model="queryParams.productQuantity" placeholder="请输入已产数量" clearable @keyup.enter="handleQuery" /> </el-form-item> <el-form-item label="生产日期" prop="productDate"> <el-date-picker clearable v-model="queryParams.productDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择生产日期"> </el-date-picker> </el-form-item> <el-form-item label="交货日期" prop="deliveryDate"> <el-date-picker clearable v-model="queryParams.deliveryDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择交货日期"> </el-date-picker> </el-form-item> <el-form-item label="发布状态" prop="status"> <el-select v-model="queryParams.status" placeholder="请选择发布状态" clearable> <el-option v-for="dict in product_schedule_status" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item label="领料状态" prop="receiveStatus"> <el-select v-model="queryParams.receiveStatus" placeholder="请选择领料状态" clearable> <el-option v-for="dict in schedule_requisition_status" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item label="排产编号" prop="serialNo"> <el-input v-model="queryParams.serialNo" placeholder="请输入排产编号" clearable @keyup.enter="handleQuery" /> </el-form-item> <el-form-item> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['mesPlan:productSchedule:add']">新增 </el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate" v-hasPermi="['mesPlan:productSchedule:edit']">修改 </el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete" v-hasPermi="['mesPlan:productSchedule:remove']">删除 </el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['mesPlan:productSchedule:export']">导出 </el-button> </el-col> <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="productScheduleList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center" /> <el-table-column label="编号" align="center" prop="id" /> <el-table-column label="流水号" align="center" prop="serialNo" /> <el-table-column label="计划号" align="center" prop="planNo" /> <el-table-column label="产品" align="center" prop="materialName" /> <el-table-column label="型号" align="center" prop="materialModel" /> <el-table-column label="规格" align="center" prop="materialSpecification" /> <el-table-column label="单位" align="center" prop="materialUnit" /> <el-table-column label="BOM" align="center" prop="bomId" /> <el-table-column label="生产线" align="center" prop="productLineId" /> <el-table-column label="工艺" align="center" prop="processId" /> <el-table-column label="项目" align="center" prop="projectId" /> <el-table-column label="待产数量" align="center" prop="requireQuantity" /> <el-table-column label="已产数量" align="center" prop="productQuantity" /> <el-table-column label="生产日期" align="center" prop="productDate" width="180"> <template #default="scope"> <span>{{ parseTime(scope.row.productDate, '{y}-{m}-{d}') }}</span> </template> </el-table-column> <el-table-column label="交货日期" align="center" prop="deliveryDate" width="180"> <template #default="scope"> <span>{{ parseTime(scope.row.deliveryDate, '{y}-{m}-{d}') }}</span> </template> </el-table-column> <el-table-column label="发布状态" align="center" prop="status"> <template #default="scope"> <dict-tag :options="product_schedule_status" :value="scope.row.status" /> </template> </el-table-column> <el-table-column label="领料状态" align="center" prop="receiveStatus"> <template #default="scope"> <dict-tag :options="schedule_requisition_status" :value="scope.row.receiveStatus" /> </template> </el-table-column> <el-table-column label="排产编号" align="center" prop="serialNo" /> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template #default="scope"> <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['mesPlan:productSchedule:edit']">修改 </el-button> <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['mesPlan:productSchedule:remove']">删除 </el-button> </template> </el-table-column> </el-table> <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" /> <!-- 添加或修改计划排产对话框 --> <el-dialog :title="title" v-model="open" width="1000px" append-to-body> <el-form ref="productScheduleRef" :model="form" :rules="rules" label-width="80px"> <el-form-item label="计划号" prop="planNo"> <el-input v-model="form.planNo" placeholder="请输入计划号" /> </el-form-item> <el-form-item label="项目" prop="projectId"> <el-input v-model="form.projectId" placeholder="请输入项目" /> </el-form-item> <el-form-item label="产品" prop="planNo"> <el-input v-model="form.planNo" placeholder="请输入计划号" /> </el-form-item> <el-form-item label="型号" prop="planNo"> <el-input v-model="form.planNo" placeholder="请输入计划号" /> </el-form-item> <el-form-item label="规格" prop="planNo"> <el-input v-model="form.planNo" placeholder="请输入计划号" /> </el-form-item> <el-form-item label="单位" prop="planNo"> <el-input v-model="form.planNo" placeholder="请输入计划号" /> </el-form-item> <el-form-item label="BOM" prop="bomId"> <el-input v-model="form.bomId" placeholder="请输入BOM" /> </el-form-item> <el-form-item label="生产线" prop="productLineId"> <el-input v-model="form.productLineId" placeholder="请输入生产线" /> </el-form-item> <el-form-item label="工艺" prop="processId"> <el-input v-model="form.processId" placeholder="请输入工艺" /> </el-form-item> <el-form-item label="待产数量" prop="requireQuantity"> <el-input v-model="form.requireQuantity" placeholder="请输入待产数量" /> </el-form-item> <el-form-item label="已产数量" prop="productQuantity"> <el-input v-model="form.productQuantity" placeholder="请输入已产数量" /> </el-form-item> <el-form-item label="生产日期" prop="productDate"> <el-date-picker clearable v-model="form.productDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择生产日期"> </el-date-picker> </el-form-item> <el-form-item label="交货日期" prop="deliveryDate"> <el-date-picker clearable v-model="form.deliveryDate" type="date" value-format="YYYY-MM-DD" placeholder="请选择交货日期"> </el-date-picker> </el-form-item> <el-form-item label="发布状态" prop="status"> <el-select v-model="form.status" placeholder="请选择发布状态"> <el-option v-for="dict in product_schedule_status" :key="dict.value" :label="dict.label" :value="dict.value"></el-option> </el-select> </el-form-item> <el-form-item label="备注" prop="remark"> <el-input v-model="form.remark" placeholder="请输入备注" /> </el-form-item> <el-divider content-position="center">排产物料信息信息</el-divider> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" icon="Plus" @click="handleAddMesProductScheduleMaterial">添加</el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" icon="Delete" @click="handleDeleteMesProductScheduleMaterial">删除</el-button> </el-col> </el-row> <el-table :data="mesProductScheduleMaterialList" :row-class-name="rowMesProductScheduleMaterialIndex" @selection-change="handleMesProductScheduleMaterialSelectionChange" ref="mesProductScheduleMaterial"> <el-table-column type="selection" width="50" align="center" /> <el-table-column label="序号" align="center" prop="index" width="50" /> <el-table-column label="物料" prop="scheduleId" width="150"> <template #default="scope"> <el-input v-model="scope.row.scheduleId" placeholder="请输入物料" /> </template> </el-table-column> <el-table-column label="型号" prop="scheduleId" width="150"> <template #default="scope"> <el-input v-model="scope.row.scheduleId" placeholder="请输入型号" /> </template> </el-table-column> <el-table-column label="规格" prop="scheduleId" width="150"> <template #default="scope"> <el-input v-model="scope.row.scheduleId" placeholder="请输入规格" /> </template> </el-table-column> <el-table-column label="单位" prop="scheduleId" width="150"> <template #default="scope"> <el-input v-model="scope.row.scheduleId" placeholder="请输入单位" /> </template> </el-table-column> <el-table-column label="需求数量" prop="requireQuantity" width="150"> <template #default="scope"> <el-input v-model="scope.row.requireQuantity" placeholder="请输入需求数量" /> </template> </el-table-column> <el-table-column label="已用数量" prop="usageQuantity" width="150"> <template #default="scope"> <el-input v-model="scope.row.usageQuantity" placeholder="请输入已用数量" /> </template> </el-table-column> <el-table-column label="剩余数量" prop="leftQuantity" width="150"> <template #default="scope"> <el-input v-model="scope.row.leftQuantity" placeholder="请输入剩余数量" /> </template> </el-table-column> <el-table-column label="备注" prop="remark" width="150"> <template #default="scope"> <el-input v-model="scope.row.remark" placeholder="请输入备注" /> </template> </el-table-column> </el-table> </el-form> <template #footer> <div class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </template> </el-dialog> </div> </template> <script setup name="ProductSchedule"> import { listProductSchedule, getProductSchedule, delProductSchedule, addProductSchedule, updateProductSchedule, exportProductSchedule } from "@/api/mesPlan/productSchedule"; import { ElMessageBox } from 'element-plus' import ProductPlanSelect from '@/components/product/ProductPlanSelect.vue'; import { listMesBom, getMesBom } from "@/api/mesPlan/mesBom"; import { listFactoryModel } from "@/api/mesModel/factoryModel"; import { listProcessModel } from "@/api/mesModel/processModel"; import { ref } from "vue"; const { proxy } = getCurrentInstance(); const { product_schedule_status } = proxy.useDict('product_schedule_status') const { schedule_requisition_status } = proxy.useDict('schedule_requisition_status') const productScheduleList = ref([]); const mesProductScheduleMaterialList = ref([]); const open = ref(false); const loading = ref(true); const showSearch = ref(true); const ids = ref([]); const checkedMesProductScheduleMaterial = ref([]); const single = ref(true); const multiple = ref(true); const total = ref(0); const title = ref(""); const data = reactive({ form: {}, queryParams: { pageNum: 1, pageSize: 10, planNo: null, orderId: null, materialId: null, bomId: null, productLineId: null, processId: null, projectId: null, requireQuantity: null, productQuantity: null, productDate: null, deliveryDate: null, status: null, receiveStatus: null, serialNo: null }, rules: { planNo: [ { required: true, message: "计划号不能为空", trigger: "blur" } ], bomId: [ { required: true, message: "BOM不能为空", trigger: "blur" } ], productLineId: [ { required: true, message: "生产线不能为空", trigger: "blur" } ], processId: [ { required: true, message: "工艺不能为空", trigger: "blur" } ], requireQuantity: [ { required: true, message: "待产数量不能为空", trigger: "blur" } ], } }); const { queryParams, form, rules } = toRefs(data); /** 查询计划排产列表 */ function getList() { loading.value = true; listProductSchedule(queryParams.value).then(response => { productScheduleList.value = response.rows; total.value = response.total; loading.value = false; }); } // 取消按钮 function cancel() { open.value = false; reset(); } // 表单重置 function reset() { form.value = { id: null, planNo: null, orderId: null, materialId: null, bomId: null, productLineId: null, processId: null, projectId: null, requireQuantity: null, productQuantity: null, productDate: null, deliveryDate: null, remark: null, status: null, receiveStatus: null, serialNo: null }; mesProductScheduleMaterialList.value = []; proxy.resetForm("productScheduleRef"); } /** 搜索按钮操作 */ function handleQuery() { queryParams.value.pageNum = 1; getList(); } /** 重置按钮操作 */ function resetQuery() { proxy.resetForm("queryRef"); handleQuery(); } // 多选框选中数据 function handleSelectionChange(selection) { ids.value = selection.map(item => item.id); single.value = selection.length != 1; multiple.value = !selection.length; } /** 新增按钮操作 */ function handleAdd() { reset(); open.value = true; title.value = "添加计划排产"; } /** 修改按钮操作 */ function handleUpdate(row) { reset(); const _id = row.id || ids.value getProductSchedule(_id).then(response => { form.value = response.data; mesProductScheduleMaterialList.value = response.data.mesProductScheduleMaterialList; open.value = true; title.value = "修改计划排产"; }); } function submitForm() { proxy.$refs["productScheduleRef"].validate(valid => { if (valid) { form.value.mesProductScheduleMaterialList = mesProductScheduleMaterialList.value; if (form.value.id != null) { updateProductSchedule(form.value).then(response => { proxy.$modal.msgSuccess("修改成功"); open.value = false; getList(); }); } else { addProductSchedule(form.value).then(response => { proxy.$modal.msgSuccess("新增成功"); open.value = false; getList(); }); } } }); } /** 删除按钮操作 */ function handleDelete(row) { const _ids = row.id || ids.value; proxy.$modal.confirm('是否确认删除计划排产编号为"' + _ids + '"的数据项？').then(function () { return delProductSchedule(_ids); }).then(() => { getList(); proxy.$modal.msgSuccess("删除成功"); }).catch(() => { }); } /** 排产物料信息序号 */ function rowMesProductScheduleMaterialIndex({ row, rowIndex }) { row.index = rowIndex + 1; } /** 排产物料信息添加按钮操作 */ function handleAddMesProductScheduleMaterial() { let obj = {}; obj.scheduleId = ""; obj.requireQuantity = ""; obj.usageQuantity = ""; obj.leftQuantity = ""; obj.remark = ""; mesProductScheduleMaterialList.value.push(obj); } /** 排产物料信息删除按钮操作 */ function handleDeleteMesProductScheduleMaterial() { if (checkedMesProductScheduleMaterial.value.length == 0) { proxy.$modal.msgError("请先选择要删除的排产物料信息数据"); } else { const mesProductScheduleMaterials = mesProductScheduleMaterialList.value; const checkedMesProductScheduleMaterials = checkedMesProductScheduleMaterial.value; mesProductScheduleMaterialList.value = mesProductScheduleMaterials.filter(function (item) { return checkedMesProductScheduleMaterials.indexOf(item.index) == -1 }); } } /** 复选框选中数据 */ function handleMesProductScheduleMaterialSelectionChange(selection) { checkedMesProductScheduleMaterial.value = selection.map(item => item.index) } /** 导出按钮操作 */ function handleExport() { ElMessageBox.confirm('是否确认导出所有计划排产数据项?', "警告", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }).then(function () { return exportProductSchedule(val).then(res => { proxy.download(res.msg); }); }) } getList(); </script> 这是整页代码，表单中的 <el-table-column label="生产线" align="center" prop="productLineId" />数据不对，他的数据在import ProductPlanSelect from '@/components/product/ProductPlanSelect.vue';这个组件中，如何调用回显
10-21
在上述代码中，将 `el-table-column` 原本的 `prop` 属性去掉，使用 `template` 插槽来自定义该列的内容。在 `template` 中引入 `ProductPlanSelect` 组件，并将当前行的 `productLineId` 作为 `prop` 传递给该组件...
<template> <div class="app-container"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="业务信息" prop="businessKey"> <el-input v-model="queryParams.businessKey" placeholder="请输入业务信息" clearable @keyup.enter.native="handleQuery"/> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <TableCard> <el-row :gutter="10" class="mb8"> <!-- <el-col :span="1.5">--> <!-- <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['oa:procinst:edit']">--> <!-- 修改--> <!-- </el-button>--> <!-- </el-col>--> <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['oa:procinst:export']"> 导出 </el-button> </el-col> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table :border="Global.tableShowBorder" v-loading="loading" :data="procinstList" @selection-change="handleSelectionChange"> <el-table-column label="流程实例ID" align="center" prop="procInstId" width="200" :show-overflow-tooltip="true"/> <el-table-column label="申请流程" align="center" prop="defName" width="200"/> <el-table-column label="流程定义编码" align="center" prop="defKey" width="200"/> <el-table-column label="业务信息" align="center" prop="businessKey" width="200"/> <el-table-column label="标题" align="center" prop="orderinfo" width="200" :show-overflow-tooltip="true"> <template slot-scope="scope"> <span v-text="formatOrderInfo(scope.row.orderinfo,'title')"></span> </template> </el-table-column> <el-table-column label="流程定义ID" align="center" prop="procDefId" width="150" :show-overflow-tooltip="true"/> <el-table-column label="开始时间" align="center" prop="startTime" width="180"> <template slot-scope="scope"> <span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d}') }}</span> </template> </el-table-column> <el-table-column label="结束时间" align="center" prop="endTime" width="180"> <template slot-scope="scope"> <span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d}') }}</span> </template> </el-table-column> <el-table-column label="耗时" align="center" prop="duration" width="150"> <template slot-scope="scope"> <span v-html="formatDuring(scope.row.duration)"></span> </template> </el-table-column> <el-table-column label="起始人" align="center" prop="startUserId"/> <el-table-column label="删除原因" align="center" prop="deleteReason"/> <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">--> <!-- <template slot-scope="scope">--> <!-- <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['oa:procinst:edit']">--> <!-- 修改--> <!-- </el-button>--> <!-- <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['oa:procinst:remove']">--> <!-- 删除--> <!-- </el-button>--> <!-- </template>--> <!-- </el-table-column>--> </el-table> <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/> </TableCard> <!-- 添加或修改流程实例对话框 --> <!-- <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>--> <!-- <el-form ref="form" :model="form" :rules="rules" label-width="120px">--> <!-- <el-form-item label="" prop="rev">--> <!-- <el-input v-model="form.rev" placeholder="请输入"/>--> <!-- </el-form-item>--> <!-- <el-form-item label="流程实例ID" prop="procInstId">--> <!-- <el-input v-model="form.procInstId" placeholder="请输入流程实例ID"/>--> <!-- </el-form-item>--> <!-- <el-form-item label="业务信息" prop="businessKey">--> <!-- <el-input v-model="form.businessKey" placeholder="请输入业务信息"/>--> <!-- </el-form-item>--> <!-- <el-form-item label="流程定义ID" prop="procDefId">--> <!-- <el-input v-model="form.procDefId" placeholder="请输入流程定义ID"/>--> <!-- </el-form-item>--> <!-- <el-form-item label="开始时间" prop="startTime">--> <!-- <el-date-picker clearable--> <!-- v-model="form.startTime"--> <!-- type="date"--> <!-- value-format="yyyy-MM-dd"--> <!-- placeholder="请选择开始时间">--> <!-- </el-date-picker>--> <!-- </el-form-item>--> <!-- <el-form-item label="结束时间" prop="endTime">--> <!-- <el-date-picker clearable--> <!-- v-model="form.endTime"--> <!-- type="date"--> <!-- value-format="yyyy-MM-dd"--> <!-- placeholder="请选择结束时间">--> <!-- </el-date-picker>--> <!-- </el-form-item>--> <!-- <el-form-item label="耗时" prop="duration">--> <!-- <el-input v-model="form.duration" placeholder="请输入耗时"/>--> <!-- </el-form-item>--> <!-- <el-form-item label="起始人" prop="startUserId">--> <!-- <el-input v-model="form.startUserId" placeholder="请输入起始人"/>--> <!-- </el-form-item>--> <!-- <el-form-item label="起始节点ID" prop="startActId">--> <!-- <el-input v-model="form.startActId" placeholder="请输入起始节点ID"/>--> <!-- </el-form-item>--> <!-- <el-form-item label="结束节点ID" prop="endActId">--> <!-- <el-input v-model="form.endActId" placeholder="请输入结束节点ID"/>--> <!-- </el-form-item>--> <!-- <el-form-item label="父流程实例ID" prop="superProcessInstanceId">--> <!-- <el-input v-model="form.superProcessInstanceId" placeholder="请输入父流程实例ID"/>--> <!-- </el-form-item>--> <!-- <el-form-item label="删除原因" prop="deleteReason">--> <!-- <el-input v-model="form.deleteReason" type="textarea" :rows="5" placeholder="请输入内容"/>--> <!-- </el-form-item>--> <!-- <el-form-item label="${comment}" prop="tenantId">--> <!-- <el-input v-model="form.tenantId" placeholder="请输入${comment}"/>--> <!-- </el-form-item>--> <!-- <el-form-item label="名称" prop="name">--> <!-- <el-input v-model="form.name" placeholder="请输入名称"/>--> <!-- </el-form-item>--> <!-- <el-form-item label="${comment}" prop="callbackId">--> <!-- <el-input v-model="form.callbackId" placeholder="请输入${comment}"/>--> <!-- </el-form-item>--> <!-- <el-form-item label="${comment}" prop="callbackType">--> <!-- <el-input v-model="form.callbackType" placeholder="请输入${comment}"/>--> <!-- </el-form-item>--> <!-- <el-form-item label="${comment}" prop="referenceId">--> <!-- <el-input v-model="form.referenceId" placeholder="请输入${comment}"/>--> <!-- </el-form-item>--> <!-- <el-form-item label="${comment}" prop="referenceType">--> <!-- <el-input v-model="form.referenceType" placeholder="请输入${comment}"/>--> <!-- </el-form-item>--> <!-- </el-form>--> <!-- <div slot="footer" class="dialog-footer">--> <!-- <el-button type="primary" @click="submitForm">确 定</el-button>--> <!-- <el-button @click="cancel">取 消</el-button>--> <!-- </div>--> <!-- </el-dialog>--> </div> </template> <script> import {listProcinst, getProcinst, delProcinst, addProcinst, updateProcinst} from "@/api/workflow/procinst"; export default { name: "Procinst", data() { return { // 遮罩层 loading: true, // 选中数组 ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // 流程实例表格数据 procinstList: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 查询参数 queryParams: { pageNum: 1, pageSize: 20, rev: null, procInstId: null, businessKey: null, procDefId: null, startTime: null, endTime: null, duration: null, startUserId: null, startActId: null, endActId: null, superProcessInstanceId: null, deleteReason: null, tenantId: null, name: null, callbackId: null, callbackType: null, referenceId: null, referenceType: null }, // 表单参数 form: {}, // 表单校验 rules: { procInstId: [ {required: true, message: "流程实例ID不能为空", trigger: "blur"} ], procDefId: [ {required: true, message: "流程定义ID不能为空", trigger: "blur"} ], startTime: [ {required: true, message: "开始时间不能为空", trigger: "blur"} ], } }; }, created() { this.getList(); }, methods: { /** 查询流程实例列表 */ getList() { this.loading = true; listProcinst(this.queryParams).then(response => { this.procinstList = response.rows; this.total = response.total; this.loading = false; }); }, // 取消按钮 cancel() { this.open = false; this.reset(); }, // 表单重置 reset() { this.form = { id: null, rev: null, procInstId: null, businessKey: null, procDefId: null, startTime: null, endTime: null, duration: null, startUserId: null, startActId: null, endActId: null, superProcessInstanceId: null, deleteReason: null, tenantId: null, name: null, callbackId: null, callbackType: null, referenceId: null, referenceType: null }; this.resetForm("form"); }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1; this.getList(); }, /** 重置按钮操作 */ resetQuery() { this.resetForm("queryForm"); this.handleQuery(); }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map(item => item.id) this.single = selection.length !== 1 this.multiple = !selection.length }, /** 新增按钮操作 */ handleAdd() { this.reset(); this.open = true; this.title = "添加流程实例"; }, /** 修改按钮操作 */ handleUpdate(row) { this.reset(); const id = row.id || this.ids getProcinst(id).then(response => { this.form = response.data; this.open = true; this.title = "修改流程实例"; }); }, formatOrderInfo(orderInfo,key){ let obj = JSON.parse(orderInfo); return obj[key]; }, formatDuring(millisecond) { var days = parseInt(millisecond / (1000 * 60 * 60 * 24)); var hours = parseInt((millisecond % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = parseInt((millisecond % (1000 * 60 * 60)) / (1000 * 60)); var seconds = (millisecond % (1000 * 60)) / 1000; let arr = [] let html = '<span ' if(days>0){ if(days>5){ html = html + 'style="color:red" ' } arr.push(days+"天") } if(hours>0){ arr.push(hours+"时") } if(minutes>0){ arr.push(minutes+"分") } if(seconds>0){ arr.push(seconds+"秒") } console.log(html); return html; }, /** 保存按钮 */ submitForm() { this.$refs["form"].validate(valid => { if (valid) { if (this.form.id != null) { updateProcinst(this.form).then(response => { this.$modal.msgSuccess("修改成功"); this.open = false; this.getList(); }); } else { addProcinst(this.form).then(response => { this.$modal.msgSuccess("新增成功"); this.open = false; this.getList(); }); } } }); }, /** 删除按钮操作 */ handleDelete(row) { const ids = row.id || this.ids; this.$modal.confirm('是否确认删除流程实例的数据项？').then(function () { return delProcinst(ids); }).then(() => { this.getList(); this.$modal.msgSuccess("删除成功"); }).catch(() => { }); }, /** 导出按钮操作 */ handleExport() { this.download('oa/procinst/export', { ...this.queryParams }, `procinst_${new Date().getTime()}.xlsx`) } } }; </script> 目前查询功能是根据业务信息来查询的, 现在要求改为根据：申请流程、开始时间、结束时间、起始人来查询，可以选择一个查询，也可以选择多个查询
最新发布
11-04
1. **在查询表单中添加新的查询字段** 2. **更新 `queryParams` 数据模型，包含新字段** 3. **调整后端接口支持这些字段作为查询参数** 4. **保持原有的搜索和重置逻辑兼容性** 下面是完整的修改代码和解释： --- ...
记一次elementui el-form组件resetFields方案无法重置部分字段值的问题
全干攻城狮
09-24 7057
背景 今天在使用elementui时，出现了一个诡异的问题，编辑、新增功能公用的表单，绑定数据后，关闭模态框无法重置部分表单项的值，如下图所示： 点击编辑按钮，打开模态框如下图： 关闭编辑模态框后，打开新增模态框，如下图（图中资源路径字段并未被重置）： 问题排查 是否el-form-item缺失了prop字段？ 表单绑定的值是否与data中定义的变量不一致？ 是否因为缺少了$nextTi...
<template> <div class="app-container"> <!--物料类型数据 --> <el-row :gutter="20"> <el-col :span="4" :xs="24"> <div class="head-container"> <el-input v-model="materiaTypelName" placeholder="请输入物料类型名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" /> </div> <div class="head-container"> <el-tree :data="typeOptions" :props="defaultProps" :expand-on-click-node="false" :filter-node-method="filterNode" ref="tree" default-expand-all highlight-current @node-click="handleNodeClick" /> </div> </el-col> <el-col :span="20" :xs="24"> <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px"> <el-form-item label="编号" prop="number"> <el-input v-model="queryParams.number" placeholder="请输入编号" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="名称" prop="name"> <el-input v-model="queryParams.name" placeholder="请输入名称" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="状态" prop="status"> <el-select v-model="queryParams.status" placeholder="请选择状态" clearable> <el-option v-for="dict in dict.type.mdm_common_status_list" :key="dict.value" :label="dict.label" :value="dict.value" /> </el-select> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['mdm:typeAttr:add']" >新增 </el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['mdm:typeAttr:edit']" >修改 </el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['mdm:typeAttr:remove']" >删除 </el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['mdm:typeAttr:export']" >导出 </el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleUrlUpdate" v-hasPermi="['mdm:mdmMaterialType:edit']" >编辑命名规则 </el-button> </el-col> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="typeAttrList" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="45" align="center" fixed/> <el-table-column label="编号" align="center" prop="number"/> <el-table-column label="名称" align="center" prop="name"/> <el-table-column label="类型名称" align="center" prop="typemgrName" width="140"/> <el-table-column label="类型编号" align="center" prop="typemgrNum" width="140"/> <el-table-column label="字段类型" align="center" prop="dataType"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_column_type" :value="scope.row.dataType"/> </template> </el-table-column> <el-table-column label="文本最大长度" align="center" prop="length" width="120"/> <el-table-column label="数值最大值" align="center" prop="maxVal" width="120"/> <el-table-column label="数值最小值" align="center" prop="minVal" width="120"/> <el-table-column label="默认值" align="center" prop="defaultVal"/> <el-table-column label="合法值列表" align="center" prop="validList" width="120"/> <el-table-column label="枚举ID" align="center" prop="enumerateId"/> <el-table-column label="枚举表" align="center" prop="enumerateTable"/> <el-table-column label="单位" align="center" prop="unit"/> <el-table-column label="是否必填" align="center" prop="isNull"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.isNull"/> </template> </el-table-column> <el-table-column label="弹窗编辑器ID" align="center" prop="popupEditId" width="120"/> <el-table-column label="URL地址" align="center" prop="href"/> <el-table-column label="是否可查询" align="center" prop="isQuery" width="120"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.isQuery"/> </template> </el-table-column> <el-table-column label="是否表单显示" align="center" prop="isShowForm" width="120"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.isShowForm"/> </template> </el-table-column> <el-table-column label="是否列表显示" align="center" prop="isShowList" width="120"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.isShowList"/> </template> </el-table-column> <el-table-column label="是否只读" align="center" prop="isReadOnly"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.isReadOnly"/> </template> </el-table-column> <el-table-column label="表单排序" align="center" prop="orderNum"/> <el-table-column label="是否支持排序" align="center" prop="sortFlag" width="120"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.sortFlag"/> </template> </el-table-column> <el-table-column label="数值是否有公差" align="center" prop="isTolerance" width="120"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_flag_list" :value="scope.row.isTolerance"/> </template> </el-table-column> <el-table-column label="正则表达式校验" align="center" prop="regularCheck" width="120"/> <el-table-column label="状态" align="center" prop="status"> <template slot-scope="scope"> <dict-tag :options="dict.type.mdm_common_status_list" :value="scope.row.status"/> </template> </el-table-column> <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="220" fixed="right"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['mdm:typeAttr:edit']" >修改 </el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['mdm:typeAttr:remove']" >删除 </el-button> <el-button size="mini" type="text" icon="el-icon-edit" @click="eidtValid(scope.row)" v-hasPermi="['mdm:typeAttr:remove']" >编辑合法值 </el-button> </template> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> <!-- 添加或修改属性规则对话框 --> <el-dialog :title="title" :visible.sync="open" width="850px" append-to-body destroy-on-close> <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right"> <!-- 基本信息 --> <el-row> <el-col :span="12"> <el-form-item label="编号" prop="number"> <el-input v-model="form.number" placeholder="请输入编号" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="名称" prop="name"> <el-input v-model="form.name" placeholder="请输入名称" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="类型ID" prop="typemgrId"> <!-- <el-input v-model="form.typemgrId" placeholder="请输入类型ID" style="width: 240px"/>--> <treeselect v-model="form.typemgrId" :options="typeOptions" :show-count="true" placeholder="请选择物料类型" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="字段类型" prop="dataType"> <el-select v-model="form.dataType" placeholder="请选择字段类型" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_column_type" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <!-- 数值与文本配置 --> <el-row> <el-col :span="12"> <el-form-item label="文本最大长度" prop="length"> <el-input v-model="form.length" placeholder="请输入文本最大长度" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="数值最大值" prop="maxVal"> <el-input v-model="form.maxVal" placeholder="请输入数值最大值" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="数值最小值" prop="minVal"> <el-input v-model="form.minVal" placeholder="请输入数值最小值" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="默认值" prop="defaultVal"> <el-input v-model="form.defaultVal" placeholder="请输入默认值" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="枚举ID" prop="enumerateId"> <el-input v-model="form.enumerateId" placeholder="请输入枚举ID" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="正则表达式校验" prop="regularCheck"> <el-input v-model="form.regularCheck" placeholder="请输入正则表达式校验" style="width: 240px"/> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="枚举表" prop="enumerateTable"> <el-input v-model="form.enumerateTable" placeholder="请输入枚举表" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="单位" prop="unit"> <el-input v-model="form.unit" placeholder="请输入单位" style="width: 240px"/> </el-form-item> </el-col> </el-row> <!-- 状态与布尔选项 --> <el-row> <el-col :span="12"> <el-form-item label="是否必填" prop="isNull"> <el-select v-model="form.isNull" placeholder="请选择是否必填" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list " :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="是否可查询" prop="isQuery"> <el-select v-model="form.isQuery" placeholder="请选择是否可查询" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list " :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="是否表单显示" prop="isShowForm"> <el-select v-model="form.isShowForm" placeholder="请选择是否表单显示" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list " :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="是否列表显示" prop="isShowList"> <el-select v-model="form.isShowList" placeholder="请选择是否列表显示" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="是否只读" prop="isReadOnly"> <el-select v-model="form.isReadOnly" placeholder="请选择是否只读" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="是否支持排序" prop="sortFlag"> <el-select v-model="form.sortFlag" placeholder="请选择是否支持排序" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="12"> <el-form-item label="数值是否有公差" prop="isTolerance"> <el-select v-model="form.isTolerance" placeholder="请选择数值是否有公差" style="width: 240px"> <el-option v-for="dict in dict.type.mdm_common_flag_list" :key="dict.value" :label="dict.label" :value="dict.value" ></el-option> </el-select> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="表单排序" prop="orderNum"> <el-input v-model="form.orderNum" placeholder="请输入表单排序" style="width: 240px"/> </el-form-item> </el-col> </el-row> <!-- 高级设置 --> <el-row> <el-col :span="12"> <el-form-item label="弹窗编辑器ID" prop="popupEditId"> <el-input v-model="form.popupEditId" placeholder="请输入弹窗编辑器ID" style="width: 240px"/> </el-form-item> </el-col> <el-col :span="12"> <el-form-item label="URL地址" prop="href"> <el-input v-model="form.href" placeholder="请输入URL地址" style="width: 240px"/> </el-form-item> </el-col> </el-row> <!-- <!– 枚举与校验 –> <el-row> <el-col :span="24"> <el-form-item label="合法值列表" prop="validList"> <!–<el-input v-model="form.validList" placeholder="请输入合法值列表" style="width: 240px"/>–> <el-table :data="validDataList" v-loading="validLoading" ref="validTable" @selection-change="handleValidSelectionChange"> <el-table-column type="selection" width="55" align="center" /> <el-table-column label="字典编码" align="center" prop="dictCode" /> <el-table-column label="字典标签" align="center" prop="dictLabel"> <template slot-scope="scope"> <span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'">{{scope.row.dictLabel}}</span> <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">{{scope.row.dictLabel}}</el-tag> </template> </el-table-column> <el-table-column label="字典键值" align="center" prop="dictValue" /> </el-table> </el-form-item> </el-col> </el-row>--> <el-row> <el-col :span="12"> <el-form-item label="状态" prop="status"> <el-radio-group v-model="form.status"> <el-radio v-for="dict in dict.type.mdm_common_status_list" :key="dict.value" :label="dict.value" >{{ dict.label }} </el-radio> </el-radio-group> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button> </div> </el-dialog> </el-col> </el-row> <!-- 合法值列表对话框 --> <el-dialog :title="validtitle" :visible.sync="validOpen" width="650px" append-to-body> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleValidAdd" v-hasPermi="['mdm:validlist:add']" >新增 </el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="validsingle" @click="handleValidUpdate" v-hasPermi="['mdm:validlist:edit']" >修改 </el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="validMultiple" @click="handleValidDeleteBtn" v-hasPermi="['mdm:validlist:remove']" >删除 </el-button> </el-col> </el-row> <el-table v-loading="validTableLoading" :data="validlistList" @selection-change="handleValidSelectionChange"> <el-table-column type="selection" width="55" align="center"/> <!-- <el-table-column label="ID" align="center" prop="id" />--> <el-table-column label="合法值名称" align="center" prop="name"/> <el-table-column label="排序" align="center" prop="orderNum"/> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleValidUpdate(scope.row)" v-hasPermi="['mdm:validlist:edit']" >修改 </el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleValidDelete(scope.row)" v-hasPermi="['mdm:validlist:remove']" >删除 </el-button> </template> </el-table-column> </el-table> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="validSubmitForm">关 闭</el-button> <!-- <el-button @click="validCancel">取 消</el-button>--> </div> </el-dialog> <!-- 添加或修改合法值列表对话框 --> <el-dialog :title="validAddtitle" :visible.sync="validAddOpen" width="500px" append-to-body> <el-form ref="validform" :model="validform" :rules="validRules" label-width="80px"> <el-form-item label="合法值名称" prop="name" label-width="95px"> <el-input v-model="validform.name" placeholder="请输入合法值名称"/> </el-form-item> <el-form-item label="排序" prop="orderNum" label-width="95px"> <el-input v-model="validform.orderNum" placeholder="请输入排序"/> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="validAddSubmitForm">确 定</el-button> <el-button @click="validAddCancel">取 消</el-button> </div> </el-dialog> <!-- 修改命名规则对话框--> <el-dialog title="修改命名规则" :visible.sync="openUrledit" width="500px" append-to-body> <el-form ref="urlform" :model="urlform" :rules="UrlEditrules" label-width="80px"> <el-form-item label="命名规则" prop="namingrule"> <el-input v-model="urlform.namingrule" placeholder="请输入命名规则" /> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button type="primary" @click="submitFormNamingrule">确 定</el-button> <el-button @click="cancelSubmitUrlEdit">取 消</el-button> </div> </el-dialog> </div> </template> <script> import {listTypeAttr, getTypeAttr, delTypeAttr, addTypeAttr, updateTypeAttr} from "@/api/mdm/typeAttr"; import {treeselect} from "@/api/mdm/mdmMaterialType"; import Treeselect from "@riophae/vue-treeselect"; import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import {listData, getData, delData, addData, updateData} from "@/api/system/dict/data"; import {listValidlist, getValidlist, delValidlist, addValidlist, updateValidlist} from "@/api/mdm/validlist"; export default { name: "TypeAttr", dicts: ['mdm_common_flag_list', 'mdm_common_status_list', 'mdm_common_column_type'], components: {Treeselect}, data() { return { // 遮罩层 loading: true, // 选中数组 ids: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // 属性规则表格数据 typeAttrList: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 查询参数 queryParams: { pageNum: 1, pageSize: 10, number: null, name: null, typemgrId: null, dataType: null, length: null, maxVal: null, minVal: null, defaultVal: null, validList: null, enumerateId: null, enumerateTable: null, unit: null, isNull: null, popupEditId: null, href: null, isQuery: null, isShowForm: null, isShowList: null, isReadOnly: null, orderNum: null, sortFlag: null, isTolerance: null, regularCheck: null, status: null, }, // 表单参数 form: {}, // 表单校验 rules: { number: [ {required: true, message: "编号不能为空", trigger: "blur"} ], name: [ {required: true, message: "名称不能为空", trigger: "blur"} ], typemgrId: [ {required: true, message: "类型ID不能为空", trigger: "blur"} ], dataType: [ {required: true, message: "字段类型不能为空", trigger: "change"} ], }, validRules: { name: [ {required: true, message: "名称不能为空", trigger: "blur"} ], }, defaultProps: { children: "children", label: "label" }, typeOptions: undefined, materiaTypelName: undefined, //合法值列表字典值 validDataList: undefined, validDataListTotal: undefined, validLoading: true, // treeselectOptions: [], selectedValues: [],// 存储当前选中的 dictValue 数组 isInitSelection: false, validtitle: "", validOpen: false, validform: {}, // 合法值列表表格数据 validlistList: [], validTableLoading: true, validAddOpen: false, validAddtitle: "", //选中的属性ID selectedAttrId: null, //选中的属性行 selectedAttrRow: null, validIds: [], validMultiple: true, validsingle: false, openUrledit:false, urlform:{}, UrlEditrules:{} }; }, watch: { // 根据名称筛选部门树 materiaTypelName(val) { this.$refs.tree.filter(val); } }, created() { this.getList(); this.getTreeselect() }, methods: { /** 查询属性规则列表 */ getList() { this.loading = true; listTypeAttr(this.queryParams).then(response => { this.typeAttrList = response.rows; this.total = response.total; this.loading = false; }); }, // 取消按钮 cancel() { this.open = false; this.reset(); }, // 表单重置 reset() { this.form = { id: null, number: null, name: null, typemgrId: null, dataType: null, length: null, maxVal: null, minVal: null, defaultVal: null, validList: null, enumerateId: null, enumerateTable: null, unit: null, isNull: null, popupEditId: null, href: null, isQuery: null, isShowForm: null, isShowList: null, isReadOnly: null, orderNum: null, sortFlag: null, isTolerance: null, regularCheck: null, status: null, createBy: null, createTime: null, updateBy: null, updateTime: null }; this.resetForm("form"); }, resetRrlform(){ this.urlform ={ id: null, number: null, name: null, parentId: null, status: null, createBy: null, createTime: null, updateBy: null, updateTime: null, icon: null, namingrule: null } this.resetForm("urlform"); }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1; this.getList(); }, /** 重置按钮操作 */ resetQuery() { this.resetForm("queryForm"); this.handleQuery(); }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map(item => item.id) this.single = selection.length !== 1 this.multiple = !selection.length }, /** 新增按钮操作 */ handleAdd() { this.reset(); this.getTreeselect(); this.open = true; this.title = "添加属性规则"; // this.getValidList() }, /** 修改按钮操作 */ handleUpdate(row) { this.reset(); const id = row.id || this.ids getTypeAttr(id).then(response => { this.form = response.data; // this.form = {}; // this.$set(this, 'form', response.data); // 强制设置响应式 console.log("点击修改按钮后:") console.log(this.form.validList) this.open = true; this.title = "修改属性规则"; // this.getValidList(); // this.$nextTick().then(() => { // this.initDefaultSelection() // }) }); }, /** 提交按钮 */ submitForm() { this.$refs["form"].validate(valid => { if (valid) { if (this.form.id != null) { updateTypeAttr(this.form).then(response => { this.$modal.msgSuccess("修改成功"); this.open = false; this.getList(); }); } else { addTypeAttr(this.form).then(response => { this.$modal.msgSuccess("新增成功"); this.open = false; this.getList(); }); } } }); }, /** 删除按钮操作 */ handleDelete(row) { const ids = row.id || this.ids; this.$modal.confirm('是否确认删除属性规则编号为"' + ids + '"的数据项？').then(function () { return delTypeAttr(ids); }).then(() => { this.getList(); this.$modal.msgSuccess("删除成功"); }).catch(() => { }); }, /** 导出按钮操作 */ handleExport() { this.download('mdm/typeAttr/export', { ...this.queryParams }, `typeAttr_${new Date().getTime()}.xlsx`) }, // 筛选节点 filterNode(value, data) { if (!value) return true; return data.label.indexOf(value) !== -1; }, // 节点单击事件 handleNodeClick(data) { this.queryParams.typemgrId = data.id; this.handleQuery(); }, /** 查询物料类型树结构 */ getTreeselect() { treeselect().then(response => { const originalData = response.data; this.typeOptions = response.data; }); }, /** 查询字典数据列表 */ getValidList() { console.log("进入字典初始化") this.validLoading = true; const query = { pageNum: 1, pageSize: 1000, dictType: "mdm_validlist_dict", } listData(query).then(response => { this.validDataList = response.rows; this.validDataListTotal = response.total; // 数据加载完成后使用 nextTick 确保 DOM 已渲染表格 this.$nextTick(() => { this.initDefaultSelection(); // 安全地初始化选中 }); this.validLoading = false; }); }, initDefaultSelection() { this.isInitSelection = true; if (this.form.validList == null) { return } const table = this.$refs.validTable; const selectedArray = this.form.validList.split(','); console.log("初始化字典数据："); console.log(selectedArray); // 根据唯一标识（如 dictCode）查找要选中的行 // 遍历数据，匹配需要默认选中的行 this.selectedValues = []; this.validDataList.forEach(row => { if (selectedArray.includes(row.dictValue)) { table.toggleRowSelection(row, true); this.selectedValues.push(row.dictValue); } }); // 初始化完成后恢复标志位 this.$nextTick(() => { this.isInitSelection = false; }); }, // handleValidSelectionChange(selection) { // console.log("进入选中方法"); // if (this.isInitSelection) { // return; // } // console.log("进入选中方法"); // // 更新选中项的 dictValue 到 selectedValues 并同步到 form.validList // this.selectedValues = selection.map(item => item.dictValue); // this.form.validList = this.selectedValues.join(','); // console.log("选中后："); // console.log(this.form.validList); // }, // 编辑合法值 handleValidUpdate(row) { this.resetValidAddForm() const id = row.id || this.validIds getValidlist(id).then(response => { this.validform = response.data; this.validAddOpen = true; this.title = "修改合法值列表"; }); }, //编辑合法值按钮 eidtValid(row) { this.selectedAttrRow = row this.getValidDataList(row); }, //获取合法值列表 getValidDataList(row) { this.validOpen = true; this.title = "编辑合法值"; this.validTableLoading = true; const query = { pageNum: 1, pageSize: 1000, attributeId: row.id } listValidlist(query).then(response => { this.validlistList = response.rows; this.total = response.total; this.validTableLoading = false; }); }, validSubmitForm() { this.validOpen = false; }, //新增合法值按钮操作 handleValidAdd() { this.validAddOpen = true; this.validAddtitle = "添加合法值"; this.resetValidAddForm(); }, //确定添加合法值按钮操作 validAddSubmitForm() { this.validform.attributeId = this.selectedAttrRow.id this.$refs["validform"].validate(valid => { if (valid) { if (this.validform.id != null) { updateValidlist(this.validform).then(response => { this.$modal.msgSuccess("修改成功"); this.validAddOpen = false; this.getValidDataList(this.selectedAttrRow); }); } else { addValidlist(this.validform).then(response => { this.$modal.msgSuccess("新增成功"); this.validAddOpen = false; this.getValidDataList(this.selectedAttrRow); }); } } }); // this.resetValidAddForm() }, validAddCancel() { this.validAddOpen = false; this.resetValidAddForm(); }, // 表单重置 resetValidAddForm() { this.validform = { id: null, attributeId: null, name: null, orderNum: null, createBy: null, createTime: null, updateBy: null, updateTime: null }; this.resetForm("validform"); }, /** 删除合法值按钮操作 */ handleValidDeleteBtn() { const ids = this.validIds; this.$modal.confirm('是否确认删除合法值列表编号为"' + ids + '"的数据项？').then(function () { return delValidlist(ids); }).then(() => { this.getValidDataList(this.selectedAttrRow); this.$modal.msgSuccess("删除成功"); }).catch(() => { }); }, /** 删除单个合法值按钮操作 */ handleValidDelete(row) { const ids = row.id; this.$modal.confirm('是否确认删除合法值列表编号为"' + ids + '"的数据项？').then(function () { return delValidlist(ids); }).then(() => { this.getValidDataListByAttrId(row.attributeId); this.$modal.msgSuccess("删除成功"); }).catch(() => { }); }, //获取合法值列表 getValidDataListByAttrId(attrId) { const query = { pageNum: 1, pageSize: 1000, attributeId: attrId } listValidlist(query).then(response => { this.validlistList = response.rows; this.total = response.total; // this.validTableLoading = false; }); }, // 多选框选中数据 handleValidSelectionChange(selection) { this.validIds = selection.map(item => item.id) this.validsingle = selection.length !== 1 this.validMultiple = !selection.length }, handleUrlUpdate(){ // 1. 获取当前选中的节点 const currentNode = this.$refs.tree.getCurrentNode(); // 2. 检查是否选中了有效节点 if (!currentNode) { this.$message.warning("请先在左侧树中选择一个物料类型"); return; } // 3. 重置表单 this.resetRrlform(); // 4. 使用节点ID请求数据 getMdmMaterialType(currentNode.id).then(response => { this.urlform = response.data; this.openUrledit = true; }); }, submitFormNamingrule(){ this.$refs["urlform"].validate(valid => { if (valid) { if (this.urlform.id != null) { updateMdmMaterialType(this.form).then(response => { this.$modal.msgSuccess("修改成功"); this.openUrledit = false; }); } } }); }, cancelSubmitUrlEdit(){ this.openUrledit = false; this.resetRrlform(); } } }; </script> 转为 vue3 语法
07-08
原代码中使用了`Treeselect`，这是一个第三方组件，在Vue3中可能需要使用其Vue3版本。 考虑到代码量很大，我们只转换主要部分，并注意以下几点： - 将`v-model`的`.sync`修饰符改为`v-model:propName`（在Vue3中...
修改ElementUI默认表单项el-form-item间距
深海微澜
02-23 2万+
ElementUI的表单组建el-form的表单项之间的间距怎么改？ 解决：表单组件之间的间距可以在CSS中设置。 .el-form-item{ margin-bottom: 0px; } 示例： 修改后:
el-form表单底部与其他组件出现距离过大问题
pingguo函数的博客
10-17 3001
场景：当在使用el-form绘制表单时，明明所有样式都书写正确，就是不明白为何form与底下其他组件会出现距离过宽的状况，且调试时一直定位不到。注意：在使用el-form表单时，若想控制el-form内的某个表单项el-form-item的显示与隐藏，需要将隐藏条件放在el-form-item中，不能放在el-form-item的内容中，否则只是el-form-item中的内容没有显示，而el-form-item仍会显示并占内容，且有它自己的样式，这样会影响整体布局。
el-form简单配置
qq_36566924的博客
06-07 293
1.页面配置 2.data配置
elementui el-form-item标签 label前加红色星号且不校验必填
m0_53682699的博客
12-15 4642
刚开始，我直接在该el-form-item标签上加 required 来获取红色星号。如何避开required且顺利加上红色星号呢？有两种方式：1、在该el-form-item标签上加一个class=“is-required”即可。2、在label下加label设置项。需求：需要在el-form-item标签 label前加红色星号，但不需要校验该字段。
el-form-item下多个form-item项校验（循环校验）
m0_47561027的博客
06-02 1509
去年在编写一个页面的时候，要求自定义字段，可以动态的循环添加，还要增加表单验证，在这块的内容的编写不太熟练，最后参照着网上的一些资料，主要参考这个博主。前端代码实现如下所示，主要是通过prop来确定好每一个表单验证的值。的博客，完成了这一项任务的开发。具体实现页面如下所示。
el-form循环el-form-item多个类型input并进行动态验证
weixin_50903388的博客
03-07 2134
【代码】el-form循环el-form-item多个类型input并进行动态验证。
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
web13093320398的博客
12-24 2060
【代码】vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法。
vue el-form 一行里面放置多个 el-form-item
热门推荐
且听风吟的博客
09-19 5万+
最近用到 element-ui 的 el-form，要求一行里面放置多个 el-form-item。 其实很简单，用 layout 布局就可以简单实现。 layout 布局是通过基础的24分栏，从而迅速简洁地创建布局。 代码实现如下： <el-form size="mini" label-width="160px" label-position="ri...
表单el-form-item自定义label
weixin_52862941的博客
12-02 2471
核心用的是 slot='label'
el-form套 el-dialog
09-07
在代码中，el-form被放置在el-dialog中，通过class属性为el-form添加了一个自定义的样式类"edit-el-form"。这个样式类可以用来缩短el-form中的每个el-form-item之间的间隔。在el-dialog中，我们可以定义表单的各个...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值