el-cascader echoes multiple data problems

el-cascader echoes multiple data problems

Problem Description

When using cascading components, you may need to click Edit or View in the project to display existing data. At this time, it may involve the problem of echoing multiple pieces of data. How to solve it?

Solution

The attribute in the el-cascader component is mainly used v-model props options. The specific code example is as follows (vue project)

<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数据
			// 可以得到选中的数据进而进行功能操作
		}
	}
}

renderings