请教关于自定义表头的问题

journeyto commented 8 months ago

描述问题 (Describe the problem)

我在使用vue3配合精简版非国际化开发一个后台管理模块，在使用自定义表头的时候遇到了点问题：

示例中的tableData是写死的，实际开发中需要异步获取后台数据，再将获取到的数据赋值给tableData变量。

我实际工作中发现，在onMounted中调用异步函数获取后台数据后再赋值已经晚了，导致tableData变量为空，页面一直无法渲染出数据。

因为本人是做运维的，对前端实在是不熟悉，在这个地方卡了很久了，找了很多资料都没能解决这个问题，盼作者能知道一二，万分感谢。

如何复现该问题 (How to reproduce the problem)

vue页面中使用pure-table组件，column.tsx中的相关代码如下：

const search = ref("");

var tableData = []; const getDataList = async () => { const res = await getServers(); //这里是自定义函数获取后台数据 tableData = res.data; console.log("rawdata1:",rawdata); }

const filterTableData = computed(() => tableData.filter( data => !search.value || data.manage_ip.toLowerCase().includes(search.value.toLowerCase()) ) );

const columns: TableColumnList = [ { type: "expand", slot: "expand" }, { label: "IP", prop: "manage_ip" }, { label: "实例名", prop: "hostname" }, { label: "项目组", prop: "group" }, { label: "负责人", prop: "admin" }, { label: "操作系统", prop: "os_type" }, { label: "系统版本", prop: "os_release" }, { label: "资产类型", prop: "asset_type" },
{ label: "操作", slot: "operation" }, { align: "right", headerRenderer: () => (<el-input clearable v-model={ search.value } placeholder="搜索" />) } ];

操作系统和浏览器信息 (Operating system and browser information)

windows 10系统浏览器版本为 120.0.6099.130（正式版本）（64 位）

验证 (Verify)

[X] 是否仔细阅读过文档 (Have you read documentation carefully)
[X] 检查是否存在相同或类似的问题 issues (Check for the same or similar issues)

xiaoxian521 commented 8 months ago

给我一个简单的demo 传到github仓库我抽空帮你改一下

journeyto commented 8 months ago

demo.zip 感谢感谢 @xiaoxian521

xiaoxian521 commented 8 months ago

传到github仓库，安装包不友好

journeyto commented 8 months ago

没有经常使用github，我的理解是上传到我自己的仓库？我上传到 https://github.com/journeyto/pure-admin-thin 这个地址了。

xiaoxian521 commented 8 months ago

var tableData = ref([]); 改为响应式你应该多参考demo啊 demo里全面都是响应式写法

journeyto commented 8 months ago

感谢作者，太给力了。其实我最开始是使用的ref响应式写法，但是后面在tableData.filter这个地方会报错" tableData.filter is not a function", 我想着用toRaw方法，把它转为普通对象，结果还是不行。所以后面才另外想办法，结果方向走错了。

journeyto commented 8 months ago

前端太菜了，折腾了半天，这个问题还是搞不定，

还是要麻烦作者有空的时候帮忙看看怎么改。

我改为了响应式的写法，现在的报错信息是 tableData.filter is not a function

感谢感谢^_^

xiaoxian521 commented 8 months ago

这周我都能很忙，这属于vue3基础知识哈，你可以问问你的前端朋友们

journeyto commented 8 months ago

说声抱歉，又来打扰了。

我前面表述的可能有些问题，把 tableData 改为响应式之后，我打印了下日志，感觉还是有最开始的问题，也就是会先计算filterTableData 的值，后面才去调用异步函数获取后台数据，前面的报错信息"tableData.filter is not a function" 可以忽略了。

PS：上周问了下我们开发，居然不懂VUE3，或者不太会用，现在居然还是用的bootstrap和jQuery这种多年前的技术[\汗]

作者有空的时候帮忙看下呢，我这个内部开发项目，不着急。

pure-admin / vue-pure-admin