elementui如何清空下拉列表框

 时间:2024-10-29 01:46:59

1、首先我们需要在自己的项目中引入vue.js和element-ui的index.css和index.js,这些在官网就有引入示例。

elementui如何清空下拉列表框
elementui如何清空下拉列表框

2、我们使用官网的示例做简单的测试。

elementui如何清空下拉列表框
elementui如何清空下拉列表框

3、由于el-option本身是由v-for标签渲染出来的,可知element-ui选择器组件的下拉列表于options属性是双向绑定的。

elementui如何清空下拉列表框
elementui如何清空下拉列表框
elementui如何清空下拉列表框

4、那么我们想要清空下拉框,只需要清空options数组的内容即可。我们在页面上加入个按钮进行测试。

elementui如何清空下拉列表框
elementui如何清空下拉列表框

5、测试结果正如我们所愿。

elementui如何清空下拉列表框

6、需要注意的是,如果我们采用this.options.length = 0 的方式清空数组,是不会触发视图的渲染的,如果非要这么做的话,我们可以调用一次vue变异的数组方法(例如sort,re即枢潋雳verse)触发视图更新。

elementui如何清空下拉列表框

7、以上即是本篇的全部内容,感谢阅读。

elementui如何清空下拉列表框
  • Navicat如何设置编辑器宽度
  • 怎么用bat执行java应用程序
  • linux系统修改网卡名称为eth0
  • Apache配置默认主页
  • 请问java中,Double类型和double有什么不同?能否转换
  • 热门搜索
    关于手抄报的边框 运动与健康手抄报 守法手抄报 有关保护环境的手抄报 圣诞节手抄报图片 青春期教育手抄报 廉洁手抄报资料 数学手抄报初一 三节三爱手抄报内容 关于三字经的手抄报