vue+element级联选择器对接后台数据

1.后台接口返回的数据肯定要和级联选择器的数据一致,所以我专门弄个model存放返回的值,如下:/** * @Auther: GGDong

 * @Date: 2019/4/3 10:30 */@Getter@Setterpublic class ServerList{    //值    private String value;

    //名称    private String label;

  //子级    private List<ServerList> children;}
2.最主要的就是写sql了,不过幸好有MyBatis有个注解提供给我们使用,方便了许多,如下

@Select("SELECT area_code AS code,area_address AS name FROM hs_region WHERE parent_code = ‘0‘")
@Results({
@Result(column = "code",property = "code"),
@Result(column = "code", property = "sub", many = @Many(select = "findListByPid"))
})
List<RegionList> findRegionList();

@Select("SELECT area_code AS code,area_address AS name FROM hs_region WHERE parent_code = #{area_code}")
List<RegionList> findListByPid(@Param("area_code") String areaCode);

3.级联选择器样式代码:

<el-form-item label="区/服" prop="regionServers">  <div class="block">    <el-cascader      :options="regionServerList"      v-model="ruleForm.regionServers"      @change="handleChange">    </el-cascader>  </div></el-form-item>4.如果涉及到回显的话,返回的值对应的是value才行,如下:
this.ruleForm.regionServers = [data.region, data.server]

原文地址:https://www.cnblogs.com/GGDong/p/10996316.html

时间: 2024-11-05 20:25:26

vue+element级联选择器对接后台数据的相关文章

vue实战使用ajax请求后台数据(小白)

vue实战使用ajax请求后台数据(小白) 前言:前端小白入门到这个阶段,应该会知道我们所做的页面上那些数据,绝大部分都不是静态的数据,而是通过调用后台接口把数据渲染到页面上的效果.ajax可以帮助我们更好的去实现这一点,下面是详解在vue中如何使用它. vue本身它是不支持直接发送ajax请求的,需要用到axios(一个基于promise的HTTP库,可以用在浏览器和node.js中)这是Axios文档的介绍,详细可查看:https://www.kancloud.cn/yunye/axios/

学习vue结合ajax查询出后台数据

第一步:先获取后台的API 这里已经写好了后台,API是bookAction_getAllBook 第二步:创建jsp文件并导入vue.js和JQuery.js 第三步:写上Model 第四步:写上View 这时页面上的显示的数据都是写死的,这时候就需要写上ajax通过它来获取到后台的数据并把它显示出来 第五步:ajax 先把model定义成一个带有bookList的空数组以便于存放后台获取的json数据 这时候要注意,这里有两个方法,我推荐使用的是方法二,因为方法一有一个不好的地方就是在页面成

vue element 时间选择器设置禁用日期

在 el-date-picker 组件中有一个 picker-options 属性 disabledDate 可以设置日期的可选范围 <el-date-picker v-model="form.trailer.cutoff_time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions"> </el

element级联选择器 el-cascader设置默认值

关键点: 1.v-model绑定得是数组 2.options绑定也得是数组 3.设置默认值的时候设置得是label对应的value 4.如果没有label,value可以通过props配置 原文地址:https://www.cnblogs.com/ll15888/p/12109069.html

node.js中的后台数据请求mock,axios

<!-- axios 处理cross跨域 后台配置好的 1.安装 cnpm install --save-dev axios 2.引入axios 到项目 或者组件(仅限当前组件使用) --> // 使用axios 请求 Axios.get("/getuser") .then(res => { //succss console.log(res.data.result); }) .catch(error => { //error console.log(error)

vue+element ui项目总结点(一)select、Cascader级联选择器、encodeURI、decodeURI转码解码、一级mockjs用法、路由懒加载三种方式

不多说上代码: <template> <div class="hello"> <h1>{{ msg }}</h1> <p>Element UI简单Cascader级联选择器使用</p> <el-cascader :options='options' v-model="selectedOptions" @change="handleChange"> </el-

基于element ui的级联选择器组件实现的分类后台接口

今天在做资产管理系统的时候遇到一个分类的级联选择器,前端是用的element的组件,需要后台提供接口支持.     这个组件需要传入的数据结构大概是这样的,详细的可参考官方案例: [{ value: '1001', label: 'IT固定资产', children: [{ value: '100101', label: '服务器' }, { value: '100102', label: '笔记本' }, { value: '100103', label: '平板电脑' }, { value:

Vue省市区三级联选择器V-Distpicker的使用

Vue省市区三级联选择器V-Distpicker的使用 最近用的Vue+Element UI时,有些地方需要用到省市区三联选择器,网上安装并尝试了多种类似的插件,但都因为无法正常实现或是没有眼缘而弃用了.最后选择的是V-Distpicker这种,配置和使用起来还算是比较简单的,下面就分享一下其用法和需要注意的点(需要踩过的坑). 1.使用方法 安装和文档,请查看官网https://distpicker.pigjian.com/ ? 或者 同性交友网站https://github.com/jcc/

vue项目模拟后台数据

这次我们来模拟一些后台数据,然后去请求它并且将其渲染到界面上.关于项目的搭建鄙人斗胆向大家推荐我的一篇随笔<Vue开发环境搭建及热更新> 一.数据建立 我这里为了演示这个过程所以自己编写了这个data.json文件 1 { 2 "school":{ 3 "students":[ 4 { 5 "name":"方毅", 6 "sex":"男", 7 "age"