一、vue+element ui 中勾选复选框获取列表当前行数据

Hello ~ 欢迎来到刘有钱的前端小窝 ❤


前言

非科班硕自学前端,在项目里遇到了太多太多问题,想记录一下。
有些是解决不了的bug,有些是实现不了的功能。
我不想再踢飞这些前端路上的绊脚石了,将它们打磨成鹅卵石然后收藏起来,等到以后遇到相同的问题可以回头来看看,或者,只是做个留念也很不错鸭 ❤


一、vue+element ui 中勾选复选框获取列表当前行数据

1.首先用 标签属性 ref 给整个列表打标识,就是给它取个名啦

⭐官网对 ref 的解释:
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $ refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是
DOM 元素;如果用在子组件上,引用就指向组件实例。

🌰一个栗子
打标识:<xxx标签 ref=“lyq”>…</xxx标签>
获取:this.$refs.lyq

		<!-- 列表 -->
        <el-table
            stripe
            class="tableBox"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style=
  • 3
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue2中,可以使用element-ui的el-tree组件实现多选框。通过设置show-checkbox属性为true,可以在每个节点前添加一个复选框。然后可以使用check-change事件来监听勾选状态的改变,并通过refs获取勾选的节点数据。 在给el-tree绑定的check-change事件中,可以通过this.$refs.tree.getCheckedKeys()来获取目前被选中的节点的key所组成的数组,通过this.$refs.tree.getCheckedNodes()来获取目前被选中的节点所组成的数组。根据获取的勾选节点数量与treeData的数量进比较,可以判断是全选、反选还是半选。通过设置v-model来控制全选或反选的状态。 示例代码如下: ```html <template> <el-checkbox v-model="checkecd" :indeterminate="indeterminate" @change="checkedAll">全部</el-checkbox> <el-tree :props="props" :data="treeData" ref="tree" accordion show-checkbox node-key="id" :expand-on-click-node="false" @check-change="handleCheckChange"></el-tree> </template> <script> export default { data() { return { checkecd: false, // 是否全选 indeterminate: false, // 是否半选 treeData: [], // 树的数据 props: { // 树节点的属性配置 } }; }, methods: { handleCheckChange(item, isChecked) { // 获取勾选的数据 let checkNode = this.$refs.tree.getCheckedKeys(); // 目前被选中的节点的 key 所组成的数组 let checkNodeName = this.$refs.tree.getCheckedNodes(); // 返回目前被选中的节点所组成的数组 // 如果勾选数量等于拉平后的treeData的数量,则是全选,反之为反选 if (checkNode.length === this.treeData.length) { this.checkecd = true; this.indeterminate = false; } else if (checkNode.length === 0) { this.checkecd = false; this.indeterminate = false; } else { this.indeterminate = true; } }, checkedAll(isChecked) { // 全选/反选 if (isChecked) { this.$refs.tree.setCheckedNodes(this.treeData); } else { this.$refs.tree.setCheckedNodes([]); } } } }; </script> ```

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值