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

原创已于 2023-04-25 20:00:55 修改 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2023-03-30 21:05:30 首次发布

element-ui开发笔记专栏收录该内容

6 篇文章

订阅专栏

该代码示例展示了如何在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>