多语言展示
当前在线:582今日阅读:19今日分享:20

elementui如何清空下拉列表框

element-ui是饿了么提供的一套组件框架,今天我们就来聊聊如何对其提供的选择器组件列表进行列表清空操作。
工具/原料
1

vue.js

2

element-ui

方法/步骤
1

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

2

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

3

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

4

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

5

测试结果正如我们所愿。

6

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

7

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

推荐信息