element-ui 如何修改checkbox文字跟选框分开点击事件

现在点击文字旁边的选择框也勾选上了

想做成这样

点击文字的时候显示详情，点击勾选的时候是勾选

应该如何修改或者有什么好的解决办法，求详细解释

这样就行

只能放弃使用此组件，自己写，使用传统方式也很简单，例如：

<template>
    <ul class="checkbox_list">
      <li class="item" v-for="(item, index) in list" :key="item.id">
        <input type="checkbox" v-model="item.check" />
        <span @click="handleShowDetail(item, index)"
          >{{ item.value }}</span>
      </li>
    </ul>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          value: "颜色",
          check: false,
        },
        {
          id: 2,
          value: "尺码",
          check: false,
          children: [
            {
              id: 21,
              value: "M码",
              check: false,
            },
            {
              id: 22,
              value: "L码",
              check: false,
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleShowDetail(item) {
      //显示详情信息的操作
      if (item.children && item.children.length > 0) {
        //do something
      }
    },
  },
};
</script>
<style lang="less">
.checkbox_list {
  .item {
    display: flex;
    align-items: center;
    input {
      cursor: pointer;
    }
    span {
      cursor: pointer;
    }
  }
}
</style>