element el-checkbox多选框change事件

这篇博客探讨了在 Vue.js 应用中使用 `el-checkbox` 组件时遇到的 `change` 事件参数问题。作者展示了如何在 `v-for` 循环中为每个 checkbox 绑定事件,并在 `checkRow` 方法中更新对应的 `isCheck` 字段。文章详细说明了事件传递和状态管理的方法,对 Vue.js 前端开发人员有参考价值。
摘要由CSDN通过智能技术生成

问题:el-checkbox,change的传参问题,与更改事件

<el-checkbox
                v-for="(item, i) in nameList"
                :key="item.num"
                :class="[
                  {
                    noCheckedClass: selectArr.includes(item.name)
                  },
                  {
                    repeatClass: item.isCheck
                  }
                ]"
                :label="item.num"
                @change="checkRow($event, item)"
              >{{ item.name }}</el-checkbox>
checkRow(e, item) {
      item.isCheck = e ? 1 : 0 //此时即更改了当前行的 isCheck 字段的值
}

Element UI (简称El-Tree) 中,如果你想要实现一种特殊的树形选择限制,比如只能选择一级、二级或三级中的一个节点,并且每个层级都只能有一个节点被选中,同时还可以设置节点默认展开和默认选中状态,你可以这样做: 1. **选择限制**: - 使用`check-strictly`属性,这是一个布尔值,当设置为true时,将启用严格的节点检查模式,即每次只能选择一个节点(包括子节点),且不能同时选择同一级的其他节点。 - 配合`props`选项,例如 `default-checked-keys` 和 `default-expanded-keys`,可以指定默认选中或展开的节点key。 2. **节点默认展开与选中**: - 对于默认展开的节点,可以在`data`源数据中维护一个`expanded`字段,初始化时将其设置为true。 - 对于默认选中的节点,同样维护一个`checked`字段,初始化时设置为所需的状态(如`true`表示选中)。 范例代码示例: ```javascript <template> <el-tree :data="treeData" check-strictly ref="treeRef" :default-checked-keys="defaultCheckedKeys" :default-expanded-keys="defaultExpandedKeys"> <!-- 树节点模板 --> <span slot-scope="{ node }"> <el-checkbox v-model="node.checked" @change="handleCheckboxChange(node)"> {{ node.label }}</el-checkbox> </span> </el-tree> </template> <script> export default { data() { return { treeData: [], // 初始化你的树形数据 defaultCheckedKeys: [1], // 默认选中的第一级节点key defaultExpandedKeys: [0], // 默认展开的第一级节点key }; }, methods: { handleCheckboxChange(node) { if (node.level > 3) { // 如果超过三级,取消选中 node.checked = false; } } } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值