这里我在el-option的选项文字后面添加了两个svg按钮（编辑和删除）：如图

当我们点击el-option时无法区分是勾选el-option还是点击了el-option选项文字后面的按钮，其实只要在后面的编辑和删除的操作按钮的click事件上面添加.native.stop即可阻止事件冒泡，实现勾选与操作分离------点击操作按钮区域外为勾选，点击操作按钮即操作

见以下代码

                      <el-option v-for="item in dataResourceOptions" :key="item.value" :label="item.label" :value="item.value" >
                        <template #default>
                          <div class="flex items-center justify-between">
                            <div class="flex items-center gap-5">
                              <div class="flex items-center w-18">
                                <app-svg-icon icon-name="check" class="w-18 h-18"></app-svg-icon>
                              </div>
                              <span>{{ item.label }}</span>
                            </div>
                            <div class="flex items-center gap-5">
                              <div class="w-25 h-25 flex items-center pl-5 option-operation-button" @click.native.stop="handleFieldItemClick(item,'编辑')"><app-svg-icon icon-name="pencil" class="w-16 h-16"></app-svg-icon></div>
                              <div  class="w-25 h-25 flex items-center pl-5 option-operation-button" @click.native.stop="handleFieldItemClick(item,'删除')"><app-svg-icon icon-name="x-close" class="w-16 h-16"></app-svg-icon></div>
                            </div>
                          </div>
                        </template>
                      </el-option>