vue element ui 动态表格,elementui 下拉框

　　主要介绍了Vue ElementUI从后台动态填充下拉框的示例代码，非常详细，有一定的参考价值。感兴趣的朋友可以参考一下。

　　1.首先，编写前端代码，并将elementUI中的标记写入。vue接口。

　　El-选择

　　v-model=xxxQuery.xxxid

　　Placeholder=请在下拉框中选择一个名称

　　maxlength=255

　　:disabled=false

　　可清除的

　　el选项

　　v-for= selectOptionsAll中的项目

　　:key=item.indexId

　　:label=item.indexName

　　:value=item.indexName

　　/el选项

　　/el-select

　　2.在返回中声明一个变量，与‘v-for’中的循环标签一致。

　　选择选项全部：[]

　　3.编写函数并初始化数据。

　　//初始化下拉框中的选项

　　异步getSelectOptions() {

　　尝试{

　　//定义一个变量来接收从后台检测到的数据。

　　//下面的indexResources是之前介绍的一个很好的服务方法。

　　const select result=await index resources . get()

　　//做出判断。

　　if(选择结果){

　　//找出值后，将值赋给之前声明的变量。

　　this . selectoptions all=select result

　　}否则{

　　这个。$message.info(

　　没有下拉框可供选择

　　)

　　}

　　} catch (err) {

　　这个。$notify({

　　标题：“未能初始化下拉框”，

　　消息：err.message，

　　类型：警告，

　　showClose: false

　　})

　　}最后{

　　this.dialogLoading=false

　　}

　　}

　　4.去掉背景代码。后台代码如下。

　　控制器层：

　　/**

　　*查询所有返回列表的数据

　　*

　　* @param

　　* @返回列表

　　* @作者王

　　*/

　　@GetMapping(/getList )

　　@ApiOperation(value=查询所有数据)

　　公共ReturnType？getList() {

　　listdvidxinddto list=xxxservice . query alllist()；

　　返回returntype . success(list)；

　　}

　　注意，JS的函数已经在vue的created(){ this . getselectoptions())中了；}函数，该函数将在加载接口时被调用。至此，实现了下拉框的动态填充。

　　这就是本文关于从后台用Vue ElementUI动态填充下拉框的示例代码。关于用Vue ElementUI动态填充下拉框的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。