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

<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>