前端工作总结116-实际案例解决vue+el-element二级联动,选项选择后不显示的问题

简介: 前端工作总结116-实际案例解决vue+el-element二级联动,选项选择后不显示的问题

1组件

<el-form-item label="所属部门" :label-width="formLabelWidth">
            <select-form @change="DepartmentList"  v-model="form.department_id" />
          </el-form-item>
         <!-- <el-form-item prop="business_module" label="所属栏目" 
:label-width="formLabelWidth">
            <!&ndash;注意用户的返回值&ndash;>
            <el-select v-model="form.business_module"  
placeholder="请选择所属栏目" multiple>
              <el-option @click="resetLoginFrom" v-for="label in business_module" 
:label="label" :value="label"></el-option>
            </el-select>
          </el-form-item>-->
          <!--7column-->
          <el-form-item prop="column" label="所属单元" :label-width="formLabelWidth">
            <!--注意用户的返回值-->
            <el-select @change="updateFun" v-model="form.column"  
placeholder="请选择所属栏目" multiple>
              <el-option  v-for="column in columns" :label="column" 
:value="column"></el-option>
            </el-select>
          </el-form-item>

2加方法

methods: {
    updateFun(){
      this.$forceUpdate();
    },
    /*封装网络请求 该数据为所属单元和所属项目*/
    DepartmentList(val) {
      /*取到val的数值*/
      this.form.column=''
        getAction("/department/attribute/"+val).then(res => {
          //回显数据
            /*this.business_module = res.data.business_module;*/
          console.log(res.data)
            this.columns = res.data.column;
      });
    },

image.png

相关文章
|
7天前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
10天前
|
存储 前端开发 数据库
前端项目一键换肤vue+element(ColorPicker)
本文介绍了如何在前端项目中实现一键换肤功能,通过使用CSS变量和Element UI的颜色选择器组件(ColorPicker),并结合Vuex进行状态管理和持久化,实现主题颜色的动态切换。
26 3
前端项目一键换肤vue+element(ColorPicker)
|
10天前
|
前端开发 JavaScript
前端一键回到顶部案例
本文介绍了如何实现网页中的一键回到顶部功能,包括两种方法:第一种是通过HTML中的锚点跳转实现快速回到顶部;第二种是使用JavaScript的`scrollTo`方法结合`requestAnimationFrame`实现滚动动画效果,让页面滚动更加平滑自然。
11 1
前端一键回到顶部案例
|
6天前
|
存储 JavaScript 前端开发
前端 vue:路由的高级使用
前端 vue:路由的高级使用
|
6天前
|
资源调度 JavaScript 前端开发
前端vue:路由的基本使用
前端vue:路由的基本使用
|
10天前
|
前端开发 JavaScript API
React、Vue.js 和 Angular前端三大框架对比与选择
前端框架是用于构建用户界面的工具和库,它提供组件化结构、数据绑定、路由管理和状态管理等功能,帮助开发者高效地创建和维护 web 应用的前端部分。常见的前端框架如 React、Vue.js 和 Angular,能够提高开发效率并促进团队协作。
26 4
|
14天前
|
JavaScript 前端开发 开发者
基于Vue.js的前端框架有哪些?
Vue.js 是一款流行的前端 JavaScript 框架,用于构建单页面应用(SPA)。除了 Vue.js 本身,还有许多基于 Vue.js 的前端框架和 UI 库,它们提供了更多的功能和组件,以便开发者能够快速构建应用程序。
19 6
|
10天前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
23 0
前端基础(十)_Dom自定义属性(带案例)
|
12天前
|
JSON 前端开发 JavaScript
socket.io即时通信前端配合Node案例
本文介绍了如何使用socket.io库在Node.js环境下实现一个简单的即时通信前端配合案例,包括了服务端和客户端的代码实现,以及如何通过socket.io进行事件的发送和监听来实现实时通信。
15 2
|
9天前
|
JavaScript 前端开发 开发者
深入浅出 Vue.js:构建响应式前端应用
Vue.js 是一个流行的前端框架,以其简洁、高效和易学著称。它采用响应式和组件化设计,简化了交互式用户界面的构建。本文详细介绍 Vue.js 的核心概念、基本用法及如何构建响应式前端应用,包括实例、模板、响应式数据和组件等关键要素,并介绍了项目结构、Vue CLI、路由管理和状态管理等内容,帮助开发者高效地开发现代化前端应用。
下一篇
无影云桌面