官方示例中给出了a-table远程加载数据的方法,但这种方式将数据过去后渲染到页面过程并没有给出能够自定义修改数据的方法。比如要根据返回的id查找字典来显示一个名称。
dataSource是可以直接修改的,但是不会动态渲染到页面上;因为自定义修改的时候已经过了a-table组件的update时间。而a-table不会因为dataSource的更改而重新渲染,这个没有找到很好的解释。
还是通过官方api列表,看到a-table有一个loading的attribute。loading=true的时候页面会渲染为转圈等待状态。loading=false 会重新根据dataSource内容渲染。
所以可以在更改数据前loading=true,修改数据后loading=false。这样就可以在组件的任意声明周期更改表格内容。
而在探索过程中看到的为了让a-table重新渲染,而重新请求数据。这个方法对需要自定已表格内容的时候是不适用的,应为重新请求数据的话,dataSource修改的内容会被重新请求的数据覆盖。自定义修改无效,所以此方法并不高明。
<template>
<a-table
:loading="loading"
:data-source="dataSource"
>
</a-table>
</template>
<script>
setNameById()
{
loading=true
dataSource[0].name=Name[id];
loading=false
}
</script>