vue3 setup 对vxe-table表格组件绑定的数组进行增删改，但表格没有刷新同步，怎么解决？

  • Z时代
  • 2024-02-20
  • 分类：IT

在vue3使用vxe-table表格组件，在script setup 标签内使用。我要实现增删改查。

我不想用vxetable官方提供的机制去搞增删改查。也就是ref<VxeTableInstance>()这种，表格组件上使用ref="xTable",然后调用例如xTable.insert进行新增

我要用js数组提供的push、unshift、splice进行新增和删除，通过数组索引修改制定属性，实现行内容编辑。进而刷新vxe-table组件内容中显示的数据，

现在的问题是，写完了测试代码，在组件的动作事件中，或者使用axios在请求成功后，对vxe-table组件绑定的集合进行增删改，修改成成功了，但是vxe-table组件不刷新数据

测试的代码

<template>
<button @click="testClick()">测试</button>
<vxe-table :data="model.list">
   <vxe-column field="name" title="名字"></vxe-column>
 </vxe-table>
</template>
<script setup>
import { ref, reactive } from "vue";
const model=reactive({
       list:[]
})
//添加数据，vxetable成功刷新
model.list.push({name:"名字"})
const testClick=()=>{
//添加成功，但vxe-table并未刷新新行
   model.list.push({name:"名字"})
//编辑成功，但vxe-table并未刷新编辑后的内容
model.list[0].name="123"
}
</script>

上面的代码，在加载的时候，model.list.push({name:"名字"})调用的时候，vxe-table表格组件，有内容。

但在点击按钮的时候，按钮点击时间中，对vxe-table表格绑定的集合，调用push方法新增数据、给第一行的name属性赋值新数据进行修改，都没有使vxe-table刷新表格中的数据。

vxe-table需要配置什么，才能通过数组的push、unshift、splice更新内容的时候，刷新vxe-table组件显示的数据内容？

上面的代码，只把vxe-table标签换成element-plus的表格组件，调用push、unshift、splice就会刷新的

回答：

更改数据没有响应更新，大概率就是拷贝了数据所以失去响应。查看源码发现确实拷贝了数组,没有使用源数据进行渲染，所以你需要更改它的数据源才能触发也就是重新赋值model.list为一个新数组，又或者更简单点，watch这个list,然后调用vex-table实例的loadData方法去通知组件更新数据。

<template>
<button @click="testClick()">测试</button>
<vxe-table ref="table" :data="model.list">
   <vxe-column field="name" title="名字"></vxe-column>
 </vxe-table>
</template>
<script setup>
import { ref, reactive, watch } from "vue";
const table = ref(null)
const model=reactive({
       list:[]
})
watch(model.list, data => table.value.loadData(data))
//添加数据，vxetable成功刷新
model.list.push({name:"名字"})
const testClick=()=>{
//添加成功，但vxe-table并未刷新新行
   model.list.push({name:"名字"})
//编辑成功，但vxe-table并未刷新编辑后的内容
model.list[0].name="123"
}
</script>

ps: 或许还有其他方法，没用过这个，只是粗看了下文档，好像没发现有什么配置，可以再多看看文档，或者百度看看

以上是 vue3 setup 对vxe-table表格组件绑定的数组进行增删改，但表格没有刷新同步，怎么解决？ 的全部内容， 来源链接： utcz.com/p/933776.html

回到顶部