Element-select下拉数据回显

570 阅读2分钟

我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!

Element-select下拉数据回显

如何在码上掘金引入第三方UI库

请谅解我用这样这样的方式入场。因为我弄了一上午没弄明白。怎么引入都不对。错误原因如下:

  1. 使用了快捷方式创建了vue项目。

  2. 没有导入正确的ElementUi Cdn链接

  3. 导入的ElementUi Cdn版本不正确。

修改方案如下:

  1. 新建空白片段。

  2. 在设置中引入资源链接。css同理。如下图:

  3. image.png

  4. vue2地址 [CDN地址]cdn.jsdelivr.net/npm/vue@2.7…

  5. elementUI地址 【CDN地址】

  6. <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    

vue+elementUI 回显select中的值

起因

不知道大家是否还记得jquery的时代,都是先找对象,然后操作dom赋值。我刚刚接手vue的时候,完全是一个小白,在加上项目比较着急,第一个使用ElementUI,然后,本人比较内向,不好意思请教其他人,最后,我舔着脸去问,人家Elementui中的下拉怎么回显呢,人家说,这么简单你都不会。我去心态直接炸了。自己回去和后端一个做项目,整了一个月,基本都学会了。

如何回显值呢

  1. v-model数据双向绑定 vue官网示例 这里我整理大佬的文章提供参阅:juejin.cn/post/704913…
  2. ElementUI中Prop属性 在表单中,Prop是用来做表单校验用的。表单域 model 字段,在使用 validate、resetFields 方法的情况下,该属性是必填的。

image.png 3. v-model中绑定的是data中的属性。当我们在编辑表单的时候,只需要把需要回显的值,赋值给data中的表单属性,就可以回显。如下代码: 4. image.png

总结

新事物的出现,难免会引起我们的恐慌,但是我们认真去学习之后,带给我们的方便还是很明显的。虽然过去好久,我也成长了不少,在这里记录一下,提醒着自己不断前进。之前写的博客园