效果演示

样式可以用 css 片段自定义。
这个功能实现不算太难,之前的方案是用 metaedit 插件,但是这个插件已经很久没有更新了。求人不如求己,自己写了个 dataviewjs 代码。
核心代码
dv.table(headers, data.map(row=>row.map(cell=>{
const text = this.container.createEl("input", {
"type": "text",
"value": cell.rawValue
})
text.addEventListener('change', async (evt) => {
updateMetadata(cell, evt.target.value)
})
return text
})))
代码只是一部分,还需要自行获取数据赋值到 headers 和 data,实现 updateMetadata 更新函数。如果是 front matter 字段,那更新函数很简单。如果是内联字段,也可以用 vault.process() 逐行查找替换。
这个代码也很简单,就是在表格每个单元格数据外套了一个输入框,监视输入同步更新笔记中的元数据。
需要注意,在实时模式下,显示的内联字段元数据不会立即更新(但笔记内容已经更新了),可以点一个链接,原地 tp 一下,就能刷新元数据显示。在阅读模式下,表格、笔记、元数据显示都会立即刷新。但是刷新时,会闪一下。几秒后(自己设定的 dataview 刷新时间),会再次闪一下。