vue3 antdv3 Select 每行数据的最右侧增加一个x删除按钮，鼠标移上去显示，移走消失，并且点击可以删除当前行的数据。

1、先上个图，这个是实现的效果：

鼠标移动E所在的行，则E的最右侧显示一个x删除按钮，点击x按钮，可以删除当前的数据，

点击增加按钮，可以新增。

2、实现的代码：

<Select
              v-model:value="cityid"
              style="width: 150px"
              placeholder="请选择"
              @change="onCityChange"
              size="small"
            >
              <SelectOption v-for="item in cityOptions" :key="item.value" :value="item.value">
                <div
                  class="flex flex-row justify-between"
                  @mouseenter="handleMouseEnter(item)"
                  @mouseleave="handleMouseLeave(item)"
                >
                  {{ item.label }}
                  <close-circle-outlined
                    @click="handleDelete(item)"
                    v-show="item.isShow"
                    :style="{ fontSize: '16px', color: '#ff0000', cursor: 'pointer' }"
                    style="margin-top: 3px"
                  />
                </div>
              </SelectOption>
              <template #dropdownRender="{ menuNode: menu }">
                <v-nodes :vnodes="menu" />
                <Divider style="margin: 4px 0" />
                <div
                  style="padding: 4px 8px; cursor: pointer"
                  @mousedown="(e) => e.preventDefault()"
                  @click="addNew"
                >
                  <plus-outlined />
                  增加
                </div>
              </template>
            </Select>

const VNodes = (_, { attrs }) => {
    return attrs.vnodes;
  };

  const SelectOption = Select.Option;

cityOptions = [
{
   value:'1',
   label:'xxxs',
   isShow:false,
}];

function handleDelete(record) {
    console.log('handleDelete', record);
  }

  function handleMouseEnter(record) {
    record.isShow = true;
  }

  function handleMouseLeave(record) {
    record.isShow = false;
  }

3、这里面isShow开始可以不赋值，默认就不会显示出来，当然赋值false也是可以的。

注意：

这里面的isShow来控制每行中鼠标移上去显示x按钮，只要给每行的记录record赋值就可以了。