如果你在
Vue3和
ElementUI中
使用el-s
elect组件的multiple属性进行单选或多选，并且想要在点击编辑按钮后，弹出一个
弹框来显示选择的结果，可以
使用ElementUI的
Dialog组件来实现。具体步骤如下：
1. 在父组件中，给
el-s
elect绑定一个v-mod
el，用来存储选择的值，并在点击编辑按钮时，打开一个
Dialog弹框，用来显示选择结果。
2. 将选择结果传递给
Dialog弹框，在
弹框中显示选择结果。
下面是一个简单的示例代码：
父组件：
```html
<template>
<div>
<
el-s
elect v-mod
el="s
elected" multiple>
<
el-option lab
el="Option 1" value="1"></
el-option>
<
el-option lab
el="Option 2" value="2"></
el-option>
<
el-option lab
el="Option 3" value="3"></
el-option>
</
el-s
elect>
<
el-button @click="edit">编辑</
el-button>
<
el-
dialog :visible.sync="
dialogVisible" title="选择结果">
<div v-for="item in s
elected" :key="item">{{ item }}</div>
</
el-
dialog>
</div>
</template>
<script>
import { ref } from '
vue'
export default {
setup() {
const s
elected = ref([]) // 存储选择结果的数组
const
dialogVisible = ref(false) // 控制
Dialog弹框显示的变量
const edit = () => {
// 打开
Dialog弹框
dialogVisible.value = true
}
return {
s
elected,
dialogVisible,
edit
}
}
}
</script>
```
在父组件中，我们
使用了
Vue3的Composition API来定义了存储选择结果的数组和控制
Dialog弹框显示的变量，并在edit方法中，打开了
Dialog弹框。
在
Dialog弹框中，我们
使用了v-for来遍历选择结果数组，将每个选择结果显示在
弹框中。
注意，我们
使用了v-bind.sync来将
dialogVisible属性和
Dialog组件中的visible属性进行了双向绑定，这样就可以在父组件中控制
Dialog弹框的显示和隐藏。
子组件：
```html
<template>
<div>
<
el-s
elect v-mod
el="s
elected" :multiple="true">
<
el-option lab
el="Option 1" value="1"></
el-option>
<
el-option lab
el="Option 2" value="2"></
el-option>
<
el-option lab
el="Option 3" value="3"></
el-option>
</
el-s
elect>
</div>
</template>
<script>
import { defineProps, ref, watch } from '
vue'
export default {
props: {
s
elected: {
type: Array,
default: () => []
}
},
setup(props) {
const s
elected = ref(props.s
elected) // 存储选择结果的数组
// 监听父组件传递的选择结果，更新子组件的选择结果
watch(() => props.s
elected, (newValue) => {
s
elected.value = newValue
})
return {
s
elected
}
}
}
</script>
```
在子组件中，我们
使用了props来接收父组件传递的v-mod
el的值，并在
el-s
elect中绑定这个值，用来实现选择功能。
在父组件中，我们
使用v-bind.sync来将父组件中的s
elected属性和子组件中的s
elected属性进行了双向绑定，这样就可以实现在父组件中点击编辑后，
Dialog弹框内部的回显数据。
1110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
