el-checkbox-group 选中返回的数组按照选项顺序排列 || el-radio-group单击选中、双击取消选中

该代码示例展示了如何在Vue.js应用中使用`el-checkbox-group`和`el-radio-group`组件来创建复选框和单选框。`v-model`用于数据双向绑定,`v-for`遍历选项,`@input`和`@click.native.prevent`处理用户交互事件,如值改变和单选按钮点击。
<template>
  <div class="contanier">
    <el-checkbox-group v-model="checkVal" @input="onChange">
      <el-checkbox
        v-for="item in checkList"
        :key="item.id"
        :label="item.name"
      ></el-checkbox>
    </el-checkbox-group>

    <el-radio-group v-model="radioVal">
      <el-radio
        v-for="item in checkList"
        :key="item.id"
        :label="item.name"
        @click.native.prevent="clickRadio(item)"
      ></el-radio>
    </el-radio-group>
  </div>
</template>
<script>
export default {
  name: "testPage",
  data() {
    return {
      checkList: [
        { id: 1, name: "张三" },
        { id: 2, name: "李四" },
        { id: 3, name: "王五" },
        { id: 4, name: "钱六" },
        { id: 5, name: "赵七" },
      ],
      checkVal: [],
      radioVal: "",
    };
  },
  methods: {
    onChange(val) {
      console.log(val);
      const orderList = this.checkList.filter((item) =>
        val.includes(item.name)
      );
      console.log(orderList);
    },
    clickRadio(item) {
      let name = item.name;
      if (this.radioVal === name) {
        this.radioVal = "";
      } else {
        this.radioVal = name;
      }
    },
  },
};
</script>
### 关于 `el-checkbox-group` 的单个数组选中问题解决方案 在使用 Element UI 中的 `el-checkbox-group` 组件时,默认情况下它是用于多场景的,其绑定的数据模型是一个数组。如果希望实现仅允许择一个选项的功能(即模拟单效果),可以通过特定的方式调整逻辑来满足需求。 以下是具体的解决方法: #### 方法一:通过监听事件控制数据 可以利用 `@change` 事件,在每次用户择新的复框时清空之前的选中项并更新到当前选中的值上。这种方式能够有效限制只保留最后一个被点击的择[^2]。 ```vue <template> <div> <el-checkbox-group v-model="selectedValue" @change="handleCheckboxChange"> <el-checkbox label="option1">Option 1</el-checkbox> <el-checkbox label="option2">Option 2</el-checkbox> <el-checkbox label="option3">Option 3</el-checkbox> </el-checkbox-group> </div> </template> <script> export default { data() { return { selectedValue: [] // 初始为空数组 }; }, methods: { handleCheckboxChange(value) { if (value.length > 1) { this.selectedValue = [value[value.length - 1]]; // 只保留最新的一项 } } } }; </script> ``` 此代码片段展示了如何动态处理用户的交互行为,并确保最终的结果始终只有一个元素存在于绑定的数组当中。 #### 方法二:自定义标签属性实现单功能 另一种思路是从根本上改变默认的行为模式,比如采用上述提到的方法三中的技巧,设置同的 `true-label` 和 `false-label` 值来区分各个状态变化情况下的表现形式[^3]。过这种方法更适用于简单的布尔型开关场景而是复杂的列表项目管理场合下适用。 对于更加灵活的需求来说,推荐还是按照第一种方式来进行开发设计更为合适一些。 --- ### 总结 无论是采取何种策略去应对这个问题,核心要点在于理解 Vue.js 数据双向绑定机制以及合理运用组件自带API接口完成业务目标设定。以上两种途径都可以很好地达成让 `el-checkbox-group` 实现类似单按钮组那样的操作体验的目的。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值