精华内容
下载资源
问答
  • el-cascader回显
    千次阅读
    2022-04-11 11:32:42

    1.定义一个级联

    <el-form :model="form" ref="form" :inline="true" :rules="rules" class="search-form search-form1">
              <el-form-item label="所属行政区域" prop="distric">
                <!-- <el-input
                   v-model="addForm.address"
                   placeholder="请输入"
                   size="small"
                 />-->
                <el-cascader size="small" placeholder="请选择" :props="defaultProps" filterable v-model="form.distric"
                             @change="handleItemChange"
                             :options="zoning" :show-all-levels="false" clearable></el-cascader>
              </el-form-item>
    </el-form>

    2.渲染数据

    zoning: JSON.parse(localStorage.getItem("treeAll")), //下拉树数据
    form: {
                     
                      distric: null,
    },
                    defaultProps: {
                        value: 'id',
                        children: 'children',
                        label: 'label'
                    },
    
    
    
    
    
    
    
    
    //获取数据
    
     this.form.distric = response.data.distric;

    ps:注意,传入数据是否为字符串类型!element默认数字和字符串类型的数字是有区别的

    更多相关内容
  • el-cascader回显失败;el-cascader回显不出来

    —我的是省市联动,选择时候是正常的,得到的绑定值是数组 [‘安徽’,‘黄山’],没问题;
    但是在详情查看时候,回显成[‘安徽’,‘黄山’],下拉框却不显示回显值。

    原因:虽然data里初始化声明变量是数组了,但是在赋值时候必须再次先声明为数组 [ ],然后再赋值。或者是直接数组塞入值。在这里插入图片描述

    <el-cascader v-model="shengshi" :options="areaOptions2" placeholder="省市" ></el-cascader>
    
    export default {
      data () {
        return {
          shengshi: [],
        }
      },
      created () {
    	this.getInfo()
      },
      methods: {
        getInfo () {
          if (res.data.province && res.data.city) {
            // el-cascader 回显 要不先定义空数组 然后下标赋值    要不就是直接把值塞入数组
            
            // 直接赋值不行
            // this.shengshi[0] = res.data.province
            // this.shengshi[1] = res.data.city
    
    		// 先声明是数组 再赋值也可以
            // this.shengshi = []
            // this.shengshi[0] = res.data.province
            // this.shengshi[1] = res.data.city
    		
    		// 直接数组塞入值也可以
            this.shengshi = [res.data.province, res.data.city] // ['安徽','黄山']
          } else {
            this.shengshi = []
          }
        }
      },
    }
    
    展开全文
  • 今天找到了大半天,没找到合适的 vue el-cascader 省市区街道4级联动的数据,并且支持维护修改的。 于是自己做了一个。 代码非常简单,重要的符合这个格式的数据,这就是我这个懂后端程序员的优势了。
  • el-cascader回显多条数据问题

    千次阅读 2021-08-08 16:27:04
    el-cascader回显多条数据问题 问题描述 使用级联组件的时候,项目中可能需要点击编辑或者查看回显出已经存在的数据。这时候可能就会涉及到要回显多条数据的问题,要怎么解决呢? 解决方法 主要用到的el-cascader组件...

    el-cascader回显多条数据问题

    问题描述

    使用级联组件的时候,项目中可能需要点击编辑或者查看回显出已经存在的数据。这时候可能就会涉及到要回显多条数据的问题,要怎么解决呢?

    解决方法

    主要用到的el-cascader组件中的v-model props options 属性,具体代码示例如下(vue项目)

    <div class="line">
       <el-cascader
          @change="theColumnChange"
          v-model="place_value"
          placeholder="请选择栏目"
          node-key="id"
          show-checkbox
          ref="tree"
          :props="defaultProps"
          :options="myoptions"
          clearable></el-cascader>
      </div>
    
    export default{
    	data() {
    		return {
    			place_value:[['1','2'],['1','3']],
    			myoptions:[
    		      {
    		        Id:'1',
    		        Name:'成都',
    		        Childlist:[
    		          {
    		            Id:'2',
    		            Name:'济南'
    		          },{
    		            Id:'3',
    		            Name:'上海'
    		          },
    		        ]
    		      }
    		    ],
    		    defaultProps:{
    		      value:'Id',  // 对应数据字段Id
    		      label:'Name', // 对应数据字段Name
    		      children:'Childlist', // 对应数据子对象
    		      multiple: true // true:多选属性;默认false:单选
    		    },
    		}
    	},
    	methods:{
    		theColumnChange(e){
    			conconsole.log(e)
    			// 每次点击显示到页面上的内容和对应的v-model数据
    			// 可以得到选中的数据进而进行功能操作
    		}
    	}
    }
    

    效果图

    在这里插入图片描述

    展开全文
  • 因为el-cascader的v-model绑定的必须是数组所以在我点击对应页面发起请求的时候,将需要的值push到cityCascader中 此时就会出现标题的问题,我的cityCascader的数据是符合要求的,但是级联选择框没有默认数据,只有...

    el-cascader回显只选中不显示的问题

    先看代码

    <el-cascader 
      :options="cityData" 
      v-model="cityCascader"
      @change="handleChange"
    	class="w500">
    </el-cascader>
    

    因为el-cascader的v-model绑定的必须是数组

    所以在我点击对应页面发起请求的时候,将需要的值push到cityCascader中

    // 点击获取到数据后,将数据push到级联中用于默认显示
    if(this.form.province != ""){
    	this.cityCascader.push(this.form.province)
    }
    this.cityCascader.push(this.form.city)
    this.cityCascader.push(this.form.district)
    

    此时就会出现标题的问题,我的cityCascader的数据是符合要求的,但是级联选择框没有默认数据,只有默认选中

    请添加图片描述

    解决方法是,不使用数组的push方法,而是直接重新赋值

    if(this.form.province != ""){
    	this.cityCascader = [this.form.province,this.form.city,this.form.district]
    }else{
    	this.cityCascader = [this.form.city,this.form.district]
    }
    

    请添加图片描述

    此时就可以默认显示啦

    展开全文
  • el-cascader回显开启多选,开启tag 导致的删除出现错误 具体配置 开启多选 开启tag 开启可删除 开启只显示末级 错误描述 当我根据后台数据回显后, 点击删除A 其实删除的确实B 解决方法 由于顺序错误的问题导致的, ...
  • el-cascader回显表单验证不生效

    千次阅读 2021-04-30 16:55:59
    element表单验证el-cascader 回显表单验证不生效问题修改前修改一修改二修改三修改四 el-cascader 回显表单验证不生效问题 场景描述:从服务器上获得数据之后,由于历史原因一个el-cascader的数据需要改为必输,...
  • el-cascader回显开启多选,开启tag 导致的删除出现错误 具体配置 开启多选 开启tag 开启可删除 开启只显示末级 错误描述 当我根据后台数据回显后, 点击删除A 其实删除的确实B 解决方法 由于顺序错误的问题导致的, ...
  • el-cascader多选回显

    2022-05-30 12:06:51
    提交数据时只需要最后一个的uuid, 后台接口数据返回的也是最后一级uuid拼接的字符串, 这个时候需要怎么处理回显
  • el-cascader 下拉框回显问题回显定位还是在上一次位置解决方法 回显定位还是在上一次位置 解决方法 增加ref属性 <el-cascader v-model="modeValue" :options="modeOptions" @change="modeChange" ref=...
  • 【代码】element里el-cascader懒加载回显
  • element el-cascader 回显 删除tag bug

    千次阅读 2021-06-24 13:27:54
    el-cascader回显开启多选,开启tag 导致的删除出现错误具体配置开启多选 开启tag 开启可删除 开启只显示末级错误描述当我根据后台数据回显后, 点击删除A 其实删除的确实B解决方法由于顺序错误的问题导致的, 回显顺序...
  • element el-cascader 级联回显 多选回显

    千次阅读 2021-07-16 16:34:08
    element el-cascader 级联回显 多选回显 不多说了,直接上代码 <template> <div id="app"> <el-card class="box-card"> <el-form ref="form2" :model="form2" label-width="80px"> <...
  • el-cascader回显

    2022-02-19 13:40:49
    el-cascader绑定的数组里面的数字必须是string类型的 比方说: v-model=[“1”,“2”]
  • el-cascader编辑动态赋值后。找到数据赋值位置下面加上 this.$forceUpdate()强制更新渲染,很好,没有作用。 查找网上案例。自己项目使用适合这个方案,有的同学尝试不行。 自己记录下,自己项目中可以解决。~~ ...
  • el-cascader懒加载回显问题、三级联动回显问题、三级联动重复请求问题、el-cascader修改样式不生效问题
  • 很多时候我们需要使用el-cascader去做级联的选择,同时在编辑的时候会有回显的问题,在element的文档中并没有很好的体现出el-cascader的回显...所以el-cascader回显的关键在于options的数据整合。 但是我们是在懒加..
  • 关于el-cascader动态加载时回显内容的解决办法
  • el-cascader多选数据渲染及回显至页面(以及踩坑历程+解决)
  • 在IE11的浏览器预览el-cascader级联组件的时候,选中的选项名显示异常,仿佛没有宽度,具体请看GIF: 自身项目中的element版本是2.4.11,怀疑是版本问题,于是重新载了一个demo,element版本是2.15.6,仍然存在该...
  • 在使用el-cascader 组件时候,返回的多选数据,默认会被按照二维数组的升序排列,请问下怎么能不让它排序,而是按照我点击的顺序,回显。</p>
  • 2.1、在el-cascader标签中加入 :key=“modalKey” v-model=“choose” 2.2、在data中定义 data() { //定义变量和初始值 return{ modalKey: 0, choose: [], } }, 2.3、赋值 参考以下代码 methods:{ //创建具体...
  • el-cascader 最后一级id及回显

    千次阅读 2022-03-11 14:54:12
    :props="{emitPath:false}" 加上这行就可以,只存最后一级id,且以最后一级id...el-cascader expand-trigger="click" placeholder="请输入" :props="{emitPath:false}" :options="xxList" v-model="xxValue" ...
  • //级联下拉回显(多级) changeDetSelect(key, treeData) { let arr = []; // 在递归时操作的数组 let returnArr = []; // 存放结果的数组 let depth = 0; // 定义全局层级 // 定义递归函数 function ...
  • 一个页面有多个el-cascader时,怎么解决动态加载和回显问题
  • el-cascader多选级联动态渲染和回显

    千次阅读 2021-09-18 13:35:31
    基于el-cascader的多选级联动态加载以及回显-新手版 总体描述 一、需求描述 二、问题分析 三、上代码! 四、总体思路 五、结语 总体描述 菜鸟新手做项目时遇到级联选择器的动态加载以及回显,网上看了很多教程,也看...
  • el-cascader 级联选择器 编辑 回显数据

    千次阅读 2021-12-23 14:59:19
    直接看代码把 都有注释噢 这个是没有子级children 的 只有父级 他是通过v-model 绑定id 值 来回显数据 ...el-form-item label="驾驶车辆" :label-width="formLabelWidth" prop="vehicleId" > &.
  • 编辑弹窗展示的时候,有时候并不能正确回显,取消展示或者改变 key 值。依次类推,拿到全部层级的 code 和 name 传给后端接收使用。获取倒数第二级的数据的 name。获取倒数第三级的数据的 name。......

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 584
精华内容 233
关键字:

el-cascader回显