这里我在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>