vue+layui实现select动态加载后台数据的例子

2024-10-01 05:49:50

刚开始由于layui form渲染与vue渲染有时间差有时会导致 select里面是空白的

后来就想办法等vue数据渲染完再渲染layui form

试过模块化导入layui form组件然后等vue数据渲染完后手动进行渲染

这种方式有一个小问题有时候会提示render方法未定义

可能是由于执行顺序原因 vue先执行了

最后把vue代码放到layui.use里面问题解决

可能不是最好的实现方式如有更好的实现方式欢迎指出共同进步

页面代码

<div id="demo" class="layui-inline layui-form" lay-filter="test2">
 <select>
  <option v-for="option in options" v-bind:value="option.id">
  {{ option.name }}
 </option> </select>
</div>

var vue = new Vue({
   el: '#demo',
   data: {
  option: {},
    options: []
   },
      created: function () {
         this.send();
      },
      updated: function () {
         layui.form.render('select','test2');
         console.log(layui.form);
      },
   methods:{
   send() {
    axios({
          method:'get',
          url:'${contextPath}/find?page=1&limit=100'
        }).then(resp => {
         this.options = resp.data.data;
          console.log(resp.data.data);
        }).catch(resp => {
          console.log('请求失败：'+resp.status+','+resp.statusText);
        });
      }
   },
  })

以上这篇vue+layui实现select动态加载后台数据的例子就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

layui 根据后台数据动态创建下拉框并同时默认选中的实例

第一步 form表单里写好一个下拉框 <div class="layui-form-item"> <label class="layui-form-label">下拉选择框</label> <div class="layui-input-block"> <select id="selectId" name="interest" lay-filter=&q
AJAX 动态加载后台数据绑定select的方法

直接上代码是可以用的,后台代码我就不贴了,我相信后台代码大家都会,直接返回json数据,我是前端比较差的,所以喜欢把每次不会的全部记起来 html代码 <select id="select" style="width : 80px;height : 30px;"> //下拉框数据动态加载 </select> js代码 $.ajax({ url: "", //后台webservice里的方法名称 contentType:
jQuery实现动态加载select下拉列表项功能示例

本文实例讲述了jQuery实现动态加载select下拉列表项功能.分享给大家供大家参考,具体如下: 需求说明: 以前使用的select下拉列表都是静态的,select 的option数据都是写死的.现在项目中的select需要根据不同的场景使用不同的数据,解决方式就是动态加载option数据. 代码部分: 下面步骤介绍了如何从数据库获取数据,并动态的在前端显示. 步骤一:jsp页面静态的select: <div> <select id="selectSM"> &
vue+layui实现select动态加载后台数据的例子

刚开始由于layui form渲染与vue渲染有时间差有时会导致 select里面是空白的后来就想办法等vue数据渲染完再渲染layui form 试过模块化导入layui form组件然后等vue数据渲染完后手动进行渲染这种方式有一个小问题有时候会提示render方法未定义可能是由于执行顺序原因 vue先执行了最后把vue代码放到layui.use里面问题解决可能不是最好的实现方式如有更好的实现方式欢迎指出共同进步页面代码 <div id="demo"
vue中img src 动态加载本地json的图片路径写法

目录: 注意:本地json文件和json文件里的图片地址都必须写在static 静态文件夹里:否则json文件里的url地址找不到. major_info.json文件里的图片路径写法页面通过v-bind的方式加载: PS:vue中图片src路径赋值 vue中引入static文件夹中图片,本以为src中直接写入图片所在路径即可,结果发现图片无法显示,控制台报404错误,图片无法找到.网上找到解决方案,在此mark一下,以便以后查询. 图片src路径动态赋值 <img class="thu
JQuery Ajax动态加载Table数据的实例讲解

我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据. <select id="type" name="type" onchange="reloadTable(this)"></select> <table id="import-table" class="table table-striped table-bordered table
ajax动态加载json数据并详细解析

效果图 jsp代码 <form > 姓名:<input name="name" type="text"/> 年龄:<input name="age" type="text"/> <input type="button" class="get" value="get提交"/> <input type="bu
vue实现的上拉加载更多数据/分页功能示例

本文实例讲述了vue实现的上拉加载更多数据/分页功能.分享给大家供大家参考,具体如下: 加载状态 <div v-if='has_log == 0'> <load-more tip="上拉加载" :show-loading="false" background-color="#fbf9fe"></load-more> </div> <div v-if='has_log == 1'> <
Python实现爬取网页中动态加载的数据

在使用python爬虫技术采集数据信息时,经常会遇到在返回的网页信息中,无法抓取动态加载的可用数据.例如,获取某网页中,商品价格时就会出现此类现象.如下图所示.本文将实现爬取网页中类似的动态加载的数据. 1. 那么什么是动态加载的数据? 我们通过requests模块进行数据爬取无法每次都是可见即可得,有些数据是通过非浏览器地址栏中的url请求得到的.而是通过其他请求请求到的数据,那么这些通过其他请求请求到的数据就是动态加载的数据.(猜测有可能是js代码当咱们访问此页面时就会发送得get请求,到其
ext combobox动态加载数据库数据(附前后台)

前台: 复制代码代码如下: var provinceStore = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: basePath + "/stationManage/station_getProvinceJSON.action" }), reader: new Ext.data.JsonReader( { root: "" }, ["PROVINCEID", "P
jquery动态加载图片数据练习代码

这几天研究jquery,感受到了该库的强大,而且找到本不错的书 <<锋利的jquery>> 这里我只是随便做了下,上面是照片列表和两个按钮,单击小图片下面显示大图片,当点击按钮时可以查看下一页,上一页的图片. 思路: 1.首先建一个照片查看页面viewer.htm,简单布局,上面是小图片和两个按钮,下面是大图片. 2.建一个一般处理程序viewServer.ashx,用来处理照片查看页面的请求. 3.然后当然要用到数据库啦,包括图片的路径,描述等信息.每张小图片路径应该对应一张大图
jquery select动态加载选择(兼容各种浏览器)

在ie6以上,我们可以通过 $("#selectID").val("xx");来个一个select控件赋值.但是在ie6下面会报错!!我们可以通过I下面方法来,使用方法:set_select_val($("#selectID" ),xx);//因为ie6不支持$("#" + provinceDom).attr("value", provinceDefvalue); 复制代码代码如下: function s

vue+layui实现select动态加载后台数据的例子

相关推荐

随机推荐