elementui页面中加载的组件,单选切换到多选时,默认选中数据未清除

在el-select标签加个key就好啦!

<el-select
    :no-data-text="$t('noData')"
    class="wit10"
    v-model="form.attributes.defaultValue"
    :placeholder="$t('setting.typeTemp.form.defaultContent')"
    :multiple="form.formType == 'checkbox'"
    clearable
    :key="currentId"
>
    <el-option
        v-for="(item, index) in form.formOption"
        :key="index"
        :label="item.value || item"
        :value="item.value || item"
    ></el-option>
</el-select>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你在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属性进行了双向绑定,这样就可以实现在父组件中点击编辑后,子组件内部的回显数据

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值