目前使用了一个vue3+typescript+naive的框架,导致很多写法都比较生疏,而且这个框架相较于我之前开发的属于比较完善,封装的比较多的框架。就产生了一些小问题,防止忘记,记录如下:
- table组件锁定触发事件的写法;
- 下拉菜单如何实现;
- 导航目录有多项,但只有一项没设置hidden时应该作为单级目录,而不是有个下拉;
- 接口调用,在哪里对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.