Vue3+ElementUI使用el-select multiple 单选或多选,在父组件点击编辑后子组件内部回显数据
时间: 2024-03-20 22:43:17 浏览: 112
如果你在Vue3和ElementUI中使用el-select组件的multiple属性进行单选或多选,并且想要在父组件点击编辑后,子组件内部回显数据,可以通过props和emit来实现。具体步骤如下:
1. 在父组件中,给el-select绑定一个v-model,用来存储选择的值,并在点击编辑按钮时,通过emit方法向子组件传递v-model的值。
2. 在子组件中,使用props接收父组件传递的v-model的值,并在el-select中绑定这个值,用来实现回显选择结果的功能。
下面是一个简单的示例代码:
父组件:
```html
<template>
<div>
<el-select v-model="selected" multiple>
<el-option label="Option 1" value="1"></el-option>
<el-option label="Option 2" value="2"></el-option>
<el-option label="Option 3" value="3"></el-option>
</el-select>
<el-button @click="edit">编辑</el-button>
<child-component :selected.sync="selected"></child-component>
</div>
</template>
<script>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
setup() {
const selected = ref([]) // 存储选择结果的数组
const edit = () => {
// 向子组件传递选择结果
const selectedValue = selected.value
const childComponent = document.querySelector('child-component')
childComponent.$emit('edit', selectedValue)
}
return {
selected,
edit
}
}
}
</script>
```
在父组件中,我们使用了Vue3的Composition API来定义了存储选择结果的数组,并在edit方法中,通过emit方法向子组件传递了v-model的值。
子组件:
```html
<template>
<div>
<el-select v-model="selected" :multiple="true">
<el-option label="Option 1" value="1"></el-option>
<el-option label="Option 2" value="2"></el-option>
<el-option label="Option 3" value="3"></el-option>
</el-select>
</div>
</template>
<script>
import { defineProps, ref, watch } from 'vue'
export default {
props: {
selected: {
type: Array,
default: () => []
}
},
setup(props) {
const selected = ref(props.selected) // 存储选择结果的数组
// 监听父组件传递的选择结果,更新子组件的选择结果
watch(() => props.selected, (newValue) => {
selected.value = newValue
})
return {
selected
}
}
}
</script>
```
在子组件中,我们使用了props来接收父组件传递的v-model的值,并在el-select中绑定这个值,用来实现回显选择结果的功能。同时,我们使用了watch来监听父组件传递的选择结果,一旦发生变化,就更新子组件的选择结果。
在父组件中,我们通过v-bind.sync来将父组件中的selected属性和子组件中的selected属性进行了双向绑定,这样就可以实现在父组件中点击编辑后,子组件内部的回显数据。
阅读全文