el-select回显多选数据(下拉里有一级数据,也有二级数据)

 具体的数据还请各位根据自己项目而定
 

实现效果:

1.多选为一级时回显:

2.多选为二级时回显:

 

代码: 

        // 回显服务类别
		showInsured () {
			console.log(this.form.serviceType) // 这个是点击修改时获取到的多选值
			let tempInsured = this.form.serviceType ? this.form.serviceType.split(',') : []
			let insured = []
			for (let i = 0;i < tempInsured.length;i++) {
				let arr = [tempInsured[i]]
				console.log(tempInsured[i], 'ppp')
				let temp = this.findParent(tempInsured[i])
				if (temp != 0) {
					arr.unshift(this.findParent(tempInsured[i]))
				}
				console.log(arr, '000')
				insured.push(arr)
			}
			this.form.serviceType = insured
			console.log(this.form.serviceType)
		},


        // 查找父节点
		findParent (childeNode) {
			console.log(childeNode)
			console.log(this.productTypeList)  // 当前下拉数组
			let parentNode = 0
			for (let i = 0;i < this.productTypeList.length;i++) {
				if (this.productTypeList[i].children) {
					if (this.productTypeList[i].value == childeNode) {
						return 0 // 说明当前节点已为父节点
					} else {
						console.log(this.productTypeList[i])
						let index = this.productTypeList[i].children.findIndex(item => item.value == childeNode)
						console.log(index)
						if (index != -1) {
							parentNode = this.productTypeList[i].value
							break
						}
					}
				}

			}
			return parentNode
		},

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于Vue3和ElementUIel-select下拉多选,你可以通过以下步骤来回显多选数据: 1. 在data中定义一个数组selectedOptions,用于存储选择的多个选项的值。 2. 在el-select的v-model绑定selectedOptions数组,实现多选功能。 3. 设置el-select的multiple属性为true,启用多选模式。 4. 在el-option的v-model绑定selectedOptions数组,表示该选项是否被选中。 5. 在mounted生命周期函数中初始化selectedOptions数组,将需要回显多选项的值添加到该数组中。 以下是示例代码: ```html <template> <el-select v-model="selectedOptions" multiple placeholder="请选择" style="width: 200px;"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" :selected="selectedOptions.indexOf(item.value) > -1"> </el-option> </el-select> </template> <script> export default { data() { return { selectedOptions: [], // 存储选择的多个选项的值 options: [ // 下拉框选项 { value: 'option1', label: '选项一' }, { value: 'option2', label: '选项二' }, { value: 'option3', label: '选项三' }, { value: 'option4', label: '选项四' } ] }; }, mounted() { // 初始化selectedOptions数组,将需要回显多选项的值添加到该数组中 this.selectedOptions = ['option1', 'option2']; } }; </script> ``` 在上述代码中,我们使用selectedOptions数组来存储选择的多个选项的值,然后在el-select的v-model中绑定该数组,实现多选功能。我们还设置了el-select的multiple属性为true,启用多选模式。在el-option中,我们使用v-model绑定selectedOptions数组,表示该选项是否被选中。在mounted生命周期函数中,我们初始化selectedOptions数组,将需要回显多选项的值添加到该数组中。这样,下拉框就可以回显多选数据了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值