前端工作总结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

相关文章
|
3月前
|
JavaScript
在 Vue 中处理组件选项与 Mixin 选项冲突的详细解决方案
【10月更文挑战第18天】通过以上的分析和探讨,相信你对在 Vue 中使用 Mixin 时遇到组件选项与 Mixin 选项冲突的解决方法有了更深入的理解。在实际开发中,要根据具体情况灵活选择合适的解决方案,以确保代码的质量和可维护性。
134 7
|
2月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
2月前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
3月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
2月前
|
JavaScript 前端开发 搜索推荐
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同?
总的来说,Vue 的数据驱动视图在诸多方面展现出独特的优势,其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
|
3月前
|
前端开发 JavaScript 安全
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
在vue前端开发中基于refreshToken和axios拦截器实现token的无感刷新
200 4
|
2月前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略
|
3月前
|
前端开发 JavaScript API
2025年前端框架是该选vue还是react?有了大模型-例如通义灵码辅助编码,就不用纠结了!vue用的多选react,react用的多选vue
本文比较了Vue和React两大前端框架,从状态管理、数据流、依赖注入、组件管理等方面进行了详细对比。当前版本和下载量数据显示React更为流行,但Vue在国内用户量增长迅速。Vue 3通过组合式API提供了更灵活的状态管理和组件逻辑复用,适合中小型项目;React则更适合大型项目和复杂交互逻辑。文章还给出了选型建议,强调了多框架学习的重要性,认为技术问题已不再是选型的关键,熟悉各框架的最佳实践更为重要。
236 0
|
3月前
|
JSON 前端开发 JavaScript
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
Vue微前端新探:iframe优雅升级,扬长避短,重获新生
153 0
|
3月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
234 0