3.9
在上一节中讲述了在后台文章列表增加纯文本的显示方法。有些时候，我们不只是想要纯文本，例如显示缩略图、显示一个与文章相关的操作按钮。这个时候，就需要使用Vue组件来自定义列了。
注册静态资源路径
就像在后台添加自定义页面一样。要让自定义的vue文件能够被访问，也需要注册一个静态地址。
::: tip
如果你已经在自定义后台页面的时候注册了静态资源路径，那么你可以使用同一个路径，而不需要多次注册
:::
在主题 functions.js 文件中使用以下代码：
var path = require('path');
add_action('init_express',()=>{
register_static_url('/srcs', path.join(__dirname,"./srcs/") );
});
在 init_express 钩子中注册静态资源根路径/srcs，可以从localhost:8081/srcs访问。该路径指向到主题目录下的srcs文件夹（需新建此文件夹）。
::: warning
编辑主题或插件的 function.js 文件后，需要重启nvPress服务才可以生效
:::
增加列
这里将使用manage_admin_${posttype}_postlist_columns过滤器。详见Hooks文档。
例如：在文章（article）默认的表格列中增加一个新的测试列：
add_filter('manage_admin_article_postlist_columns', defaultColumns=>{
return [
...defaultColumns,
{key: '_test_col', title: '测试列', width: 90, component_url: "/srcs/sample.vue"},
]
})
和显示纯文本不同的是，这里使用了 component_url 参数。这表示：使用参数中的这个Vue组件去渲染这个列内容。
填充列内容
由于在增加列时使用了Vue组件，则显示的时候将在刚才注册的静态资源路径下增加 sample.vue 文件：
<template>
<button @click="handleShowID">显示ID</button>
</template>
<script setup>
// 脚本内容
var $props = defineProps({
row: Object
})
var handleShowID = ()=>{
alert($props.row.id)
}
</script>
<style scoped>
/* 样式，只能使用CSS，不支持Less、Sass */
</style>
这样，将看到：后台文章列表显示了一个显示ID按钮，点击后弹出ID内容。
行数据： Vue组件接收一个row参数，此参数包含了这一行（文章）的内容。但需要注意的是，内容不一定包含你想要显示的meta信息。此时，可以使用 manage_admin_${posttype}_postlist_data 过滤器来增加这一行的数据输出。
数据更新到表格
在上面的示例中只是显示了按钮内容。如果该按钮使用了弹出框允许用户输入，并且修改了数据。想要不刷新页面直接更新到原表格中进行显示，应该怎么做呢？
component_url 组件除了接收 row参数外，还有一个Emit事件 update:column。在刚才的vue文件中使用即可：
<script setup>
// ...其他js内容
var $emit = defineEmits(['update:column']);
var update_column = (column_key, value) => $emit('update:column', {column_key, value});
// 例如，修改了文章标题，那么可以直接调用：update_column('title', '修改后的标题内容')
// ...其他js内容
</script>