elmentui 下拉菜单从另一张表查写法
时间: 2023-12-19 08:55:58 浏览: 81
菜单栏下拉菜单特效代码
在 ElementUI 中,下拉菜单可以通过 `el-select` 组件来实现,而要从另一张表中获取选项数据,需要先将数据存储在一个数组中,然后将该数组作为 `el-select` 组件的 `options` 属性值。
假设你要从名为 `otherTable` 的表中获取选项数据,可以使用以下步骤:
1. 在 Vue 实例中定义一个数组来存储选项数据,例如:
```
data() {
return {
options: []
}
}
```
2. 在需要展示下拉菜单的地方,使用 `el-select` 组件,并将 `options` 属性绑定到上一步定义的数组中,例如:
```
<el-select v-model="selectedOption" :options="options"></el-select>
```
3. 在组件的 `created` 钩子函数中,使用 Axios 或其他方式从 `otherTable` 中获取数据,并将数据存储在 `options` 数组中,例如:
```
created() {
axios.get('/api/otherTable').then(response => {
this.options = response.data
})
}
```
其中,`axios` 是一个常用的发送 AJAX 请求的库,`/api/otherTable` 是你需要替换为实际的后端 API 接口地址。
这样,当组件加载时,会自动从 `otherTable` 中获取选项数据,并在下拉菜单中展示。
阅读全文