近期遇到的小问题总结（vue3+ts+naive）

目前使用了一个vue3+typescript+naive的框架，导致很多写法都比较生疏，而且这个框架相较于我之前开发的属于比较完善，封装的比较多的框架。就产生了一些小问题，防止忘记，记录如下：

1. table组件锁定触发事件的写法；
2. 下拉菜单如何实现；
3. 导航目录有多项，但只有一项没设置hidden时应该作为单级目录，而不是有个下拉；
4. 接口调用，在哪里对ip地址进行设置；

1.关于table的列表项都是进行过拆分的，单独在ts文件写的数据，所以我不懂应该怎么触发事件

Naive的官方文档是提到了的，关于事件在jsx的写法，onUpdateValue

 

 所以在代码中需要把这个本身的onupdate：value改为onUpdateValue

  {
    title: '锁定',
    key: 'lockStatus',
    width: 90,
    render(row) {
      return h('div', null, [
        h(
          NSwitch,
          { text: true, color: '#18a2f4', onUpdateValue: () => lock() }
        )
      ])
    }
  },
function lock(){}

2 这是操作部分的展示形式和代码：（因为我不知道单拉出来写操作应该怎么写下拉定位，但是这个table组件是直接支持这种写法的）

  <BasicTable
      :columns="columns"
      :request="loadTable"
      :row-key="(row) => row.fId"
      ref="actionRef"
      :scroll-x="1090"
      :actionColumn="operationColumn"
      hideColumnSetting
      v-model:checked-row-keys="checkedListRef"
    >
</BasicTable>

/** 作为一个操作栏设置在表格里面 */
const operationColumn = reactive({
  title: '操作',
  key: 'action',
  fixed: 'right',
  align: 'center',
  ellipsis: false,
  render(record) {
    return h(TableAction as any, {
      style: 'text',
      actions: [
        {
          label: '查看',
          onClick: gotoDetail.bind(null, record)
        },
        {
          label: '编辑',
          onClick: handleCancel.bind(null, record),
          style: operation ? 'color:gray' : ''
          // ifShow: record.state === 1
        },
      ],
/** 下拉菜单的实现 */
      dropDownActions: [
        {
          label: '启用',
          key: 'enabled',
          // 根据业务控制是否显示: 非enable状态的不显示启用按钮
          ifShow: () => {
            return true
          }
        },
        {
          label: '禁用',
          key: 'disabled',
          ifShow: () => {
            return true
          }
        }
      ]
    })
  }
})

3.