应无所住,而生其心
排名
1
文章
860
粉丝
112
评论
163
net core webapi post传递参数
庸人 : 确实坑哈,我也是下班好了好几次,发现后台传递对象是可以的,但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器,因为现在百度富文本已经停止维护了,用tinymec...
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

element plus 下拉列表默认选中有延迟

5590人阅读 2021/12/20 17:19 总访问:5182780 评论:0 收藏:0 手机
分类: 前端

会先加载id或者编号,然后有点延迟的时间才转换成内容。

可以这样解决,绑定的时候给中文名字,然后在改变的时候给Id。 (弃用的方法不科学)

绑定的时候给中文名字

  1. state.role = state.form.role.role_name
  2. state.department = state.form.department.department_name

同时要注意也给form绑定一下Id,不然回传回去的时候就是传递的名称了

然后在改变的时候给Id,但是感觉这样有点绕了,不是太科学

  1. methods: {
  2. roleChangeValue(value) {
  3. this.form.RoleId = value
  4. },
  5. departmentChangeValue(value) {
  6. this.form.DeptID = value
  7. },
  8. }

会出现这样的延迟不是它这个控件的问题,而不是我这里加载方法用了异步的问题

看看我们这类的逻辑其实很简单


1:调用fetchAllFileType方法拿到文件类型给select提供数据
2:然后给表单赋值其实就是执行了类型state.form.fileTypeId=文件id的话,select通过id它会自己选中对应的value
3:显示弹窗

步骤很简单,但是我们这里的fetchAllFileType其实是异步方法,也就是说后面的步骤不会等这个方法执行完毕后在执行,也就是说这个方法可能都还没有执行完毕,弹窗已经弹出来了,所以如果fetchAllFileType方法需要的一点点时间,数据还没有完全处理好的时候弹窗就已经弹出来的,这个时候我们看到的就不会最终处理好的数据的情况了,所以我们会觉得有延迟,其实出现这样的延迟不是它这个控件的问题,而不是我这里加载方法用了异步的问题!

解决方法,也很简单,异步修改成同步,或者整一个回调函数,数据回来了我们在处理后续的操作就行了

其实就是我们不想看到它这个渲染的过程,我们等它渲染完了才显示出来。


欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

vue3 element plus 表单输入框放到一行

当垂直方向空间受限且表单较简单时,可以在一行内放置表单。 通过设置 inline 属性为 true 可以让表单域变为行内的表单域...

element plus 下拉列表select的使用。下拉列表无法选择值

下拉列表无法选择值要给一个v-model: 而且要给对,在下面对应的要有:

vue elementui,vue3 element plus 文件上传的时候设置其他参数。后台.net接收传递的额外参数。图片上传

比如上传文件的时候额外传递两个select选择的值 前台前面上传文件的时候要提供默认参数很简单,el-upload绑定一个data即可...

vue3 element plus 表格使用vue3常用界面搭配。vue3基础模板使用

一个简单的表格加时间搜索界面效果如下: 代码如下: <template> <div class="app-container"&g...

element plus table 表格 获取选中的行

官网的表格文档就有,直接一个方法就搞定了,看官网表格的文档中的方法介绍就有了 使用getSelectionRows方法即可 <el-...

element plus 日期选择器 限制日期范围。限制只能选择当前月份之后的月份

element plus 日期选择器 可以用disabledDate来限制日期范围。例如限制只能选择当前月份以及之后的月份。 <el-date-pi...

element plus 带提交内容的删除确认框。element plus 确认框

[TOC]Element Plus 带提交内容的删除确认框 ElMessageBox.prompt('是否确认删除数据,涉及到的数据将会被物理删除,...

vue3 element plus table+Sortable.js 行拖动,表格拖动

要先安装好Sortable.js依赖 cnpm install sortable.js 实现拖动的代码如下可以直接复制运行 <template> <...

element plus与element ui 多选表格判断某行是否选中

element plus 多选表格判断每行是否选中@select="selectRow" const selectRow = (selection: any, row: any) ...

element plus 表格 table分页状态或者条件类型切换下实现勾选记录

实现这种切换的时候勾选的复选框状态保持,如果是分页其实实现思路也一样。 实现思路:有一个缓存,存储的是选中的行,...

element plus tree 获取选中节点的父节点。树获取所有选中的节点

[TOC]element plus tree 获取选中节点的父节点通过 treeRef.value.getNode(data) 获取到当前节点的实例,随后通过 node.par...