可增删改查的下拉框 (基于antdv)

     <a-dropdown

            v-model:open={this.dropdownClose}

            overlayStyle={{ width: '200px' }}

            trigger="click"

            overlay={

              <a-menu>

                {this.items.map((item, index) => {

                  return (

                    <a-menu-item

                      key={index}

                      class="menu-item"

                      onClick={() => {

                        this.menuItemClick(item, index);

                      }}

                    >

                      {this.menueItemEditIndex === index ? (

                        <a-input

                          style={{ height: '30px', width: '125px' }}

                          autoFocus

                          v-model:value={this.items[index]}

                          onClick={(e) => {

                            this.menuItemInputClick(e);

                          }}

                          onPressEnter={(e) => {

                            this.menuItemInputPressEnter(e);

                          }}

                          onBlur={(e) => {

                            this.menuItemInputPressEnter(e);

                          }}

                        />

                      ) : (

                        <span>{item}</span>

                      )}

                      <span>

                        <FormOutlined

                          style={{ marginRight: '10px', marginLeft: '10px', color: 'blue' }}

                          onClick={(e) => {

                            this.editNodeTypeClick(e, index);

                          }}

                        />

                        <a-popconfirm

                          placement="right"

                          title="确定删除该节点？"

                          okText="确定"

                          cancelText="取消"

                          onConfirm={(e) => {

                            this.deleteClickConfirm(e, index);

                          }}

                          onCancel={() => {

                            this.deleteClickCancel();

                          }}

                        >

                          <DeleteOutlined

                            style={{ color: 'red' }}

                            onClick={(e) => {

                              e.stopPropagation();

                            }}

                          />

                        </a-popconfirm>

                      </span>

                    </a-menu-item>

                  );

                })}

                <a-menu-item>

                  <input

                    type="text"

                    class="addInput"

                    placeholder="新增节点类型"

                    onClick={(e) => {

                      this.addInputClick(e);

                    }}

                    v-model={this.addItemContent}

                  />

                  <a-button

                    type="dashed"

                    size="small"

                    class="addBtn"

                    onClick={(e) => {

                      this.addBtnClick(e);

                    }}

                  >

                    +新增

                  </a-button>

                </a-menu-item>

              </a-menu>

            }

          >

            <a-button>

              {this.currentPartType ? (

                this.currentPartType

              ) : (

                <span style={{ color: '#999' }}>请选择节点类型</span>

              )}

              <DownOutlined/>

            </a-button>

          </a-dropdown>