【前端element-ui】对于封装el-select和checkbox-group的多选控件导致数据双向绑定失败问题的处理

server/2024/10/21 10:16:44/

一、关于通过父组件props传参el-select【下拉多选模式】双向绑定失败问题处理方式
1、this.$emit(“change”, val); 采用change二不是input
2、对_value赋值不能直接使用"="号,而是push

<template><div><el-select v-model="_value" multiple clearable placeholder="请选择选项" @change="handleValue"><el-option v-for="(v, index) in options" :key="index" :value="v" :label="v"></el-option></el-select></div>
</template>
<script>export default {name: "multiple",props:{value:{type: Array,default: () => {return []}},options:{type: Array,default: () => {return []}},},computed:{_value: {get() {return this.value;},set(val) {this.$emit("change", val);}}},methods: {handleValue(data){this._value.splice(0, this._value.length);data.forEach(el=>{this._value.push(el)})}}
}
</script>

二、关于通过父组件props传参checkbox-group【多选框】双向绑定失败问题处理方式
1、内部事件采用@input而不是@change=“handleValue”
2、对_value赋值不能直接使用"="号,而是push

<template><div><el-checkbox-group v-model="_value" @input="handleValue"><el-checkbox v-for="(v, index) in options" :key="index" :label="v" >{{v}}</el-checkbox></el-checkbox-group></div>
</template>
<script>export default {name: "checkbox",props:{value:{type: Array,default: () => {return []}},options:{type: Array,default: () => {return []}},},computed:{_value: {get() {return this.value;},set(val) {this.$emit("change", val);}}},methods: {handleValue(data){this._value.splice(0, this._value.length);data.forEach(el=>{this._value.push(el)})}}
}
</script>

http://www.ppmy.cn/server/95808.html

相关文章

警惕!过度焦虑背后的隐形伤害:你的身体在悄悄发出警告

在这个快节奏、高压力的时代&#xff0c;焦虑似乎成了现代人难以逃脱的情绪枷锁。偶尔的焦虑感或许能激发我们的动力&#xff0c;促使我们面对挑战&#xff0c;但当这种情绪超出可控范围&#xff0c;演变为过度焦虑时&#xff0c;它不仅侵蚀着我们的心理健康&#xff0c;更在悄…

ShardingSphere 之ShardingJDBC扩展功能:分片审计、数据加密、读写分离、广播表、绑定表

文章目录 分片审计数据加密读写分离广播表绑定表 分片审计 开发者手册 分片审计功能是针对数据库分片场景下对执行的 SQL 语句进行审计操作。可以对我们要执行的sql进行拦截并进行审核。 目前ShardingSphere内置的分片审计算法只有一个&#xff0c;DML_SHARDING_CONDITIONS。…

使用openpyxl库对excel函数处理数据

哈喽,大家好,我是木头左! 在本文将介绍如何使用openpyxl库对Excel文件进行函数处理,包括使用内置函数、自定义函数和引用其他工作表的函数等。 使用内置函数 openpyxl提供了许多内置函数,可以直接在单元格中使用。例如,可以使用SUM函数计算一列或一行的总和,使用AVERA…

Vue+SpringBoot+SpringSecurity项目对于跨域的深度理解

随记&#xff08;可跳过&#xff09;&#xff1a;CodeMan在熬夜肝一周SpringSecurity学习的时候&#xff0c;总是报错&#xff0c;于是冥思苦想&#xff0c;选择了询问Ai&#xff0c;但是不论怎么设置权限&#xff0c;接口仍然无法按所设想的权限被调用&#xff0c;于是在今天的…

牛顿插值法代替泰勒公式

引入 例题 近似函数&#xff1a; 通过这个近似函数可以看出&#xff0c;若要证的函数超过二阶可导&#xff0c;那么就不适合用牛顿插值法代替泰勒公式 因为&#xff0c;后面的操作非常复杂&#xff0c;不划算了… 总结 我们可以通过牛顿插值法生成一个逼近曲线的直线&#xf…

Python PPT 操作全面指南

PowerPoint 是我们日常生活中经常使用的演示文稿制作工具&#xff0c;而 Python 作为一种强大的编程语言&#xff0c;在处理 PowerPoint 文件方面也有着广泛的应用。本文将全面总结 Python PPT 操作&#xff0c;包括如何使用 Python 来读取、写入、修改 PPT 文件&#xff0c;以…

如何在uniapp上隐藏默认导航栏

当要定义导航栏&#xff0c;使用uni.switchTab来跳转页面时&#xff0c;需要将默认的导航栏进行隐藏。 比如使用 uni.hideTabBar(); 去隐藏的话&#xff0c;可能会有闪现出现的可能性。 我们可以在package.json当中的 tabBar加"custom": true。例: "tabBar&q…

C# Unity 面向对象补全计划 七大原则 之 里氏替换

本文仅作学习笔记与交流&#xff0c;不作任何商业用途&#xff0c;作者能力有限&#xff0c;如有不足还请斧正 本系列作为七大原则和设计模式的进阶知识&#xff0c;看不懂没关系 请看专栏&#xff1a;http://t.csdnimg.cn/mIitr&#xff0c;尤其是关于继承的两篇文章&#xff…