vue3 - elementPlus中dialog里使用table，如何渲染数据，重新加载数据？

Question

elementPlus中dialog里使用table但是不能渲染数据，也不能重新加载数据
查的方法，加:key,但是没有效果

<el-dialog v-model="dialogUserVisible" width="500px" :key="new Date().getTime()">      <el-table :data="dialogUserData" style="width: 100%" :key="reflash">        <el-table-column label="选择" width="180" >          <el-checkbox  value=""/>        </el-table-column>        <el-table-column prop="username" label="角色名称" width="180" />        <el-table-column prop="id" label="目前角色" width="180" />      </el-table>    </el-dialog>

//刷新keyconst reflash = ref(Math.random())const dialogUserData = reactive([])/选择用户弹窗数据function checkUser(){  dialogUserVisible.value = true  console.log(1)  getUsers()}async function getUsers() {    const param = {status : 1}  const jsonState = JSON.stringify(param)  const params = {params : jsonState}  const res = await systemService.getUsers(params)  if(checkCode(String(res.code),res.message)){    dialogUserData.values = res.data    let m = Math.random()    reflash.value = m    console.log(m)    console.log(reflash)  }

点一个角色分配用户，触发弹窗时加载后台调用并加载用户的数据，点另一个角色重新加载弹窗中数据

Answer 1

赋值语句错了吧 可以上面用ref 下面用.value

Answer 2

看起来你的代码应该能够加载数据，并且尝试通过改变 :key 的值来强制 Vue 重新渲染 el-dialog 和 el-table。但是，你可能在更新 dialogUserData 数组时遇到了问题，因为 Vue 不会自动检测到以下变动的数组：

• 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue

在你的代码中，你使用了 dialogUserData.values = res.data 来更新数据，这可能是问题所在。dialogUserData 是一个响应式引用（通过 reactive 创建），但是你应该直接更新它，而不是它的 values 属性。你应该使用 dialogUserData = res.data 来替换 dialogUserData.values = res.data。

此外，:key 属性通常用于在 v-for 循环中强制 Vue 重新渲染列表项，而不是在 el-dialog 或 el-table 上使用。在你的情况下，你可能不需要在 el-dialog 或 el-table 上使用 :key。

下面是你的代码的一个可能的修正版本：

<el-dialog v-model="dialogUserVisible" width="500px">  <el-table :data="dialogUserData" style="width: 100%">    <el-table-column label="选择" width="180">      <el-checkbox  value=""/></el-checkbox>    </el-table-column>    <el-table-column prop="username" label="角色名称" width="180" />    <el-table-column prop="id" label="目前角色" width="180" />  </el-table></el-dialog>

const dialogUserData = reactive([])function checkUser(){  dialogUserVisible.value = true  console.log(1)  getUsers()}async function getUsers() {  const param = {status : 1}  const jsonState = JSON.stringify(param)  const params = {params : jsonState}  const res = await systemService.getUsers(params)  if(checkCode(String(res.code),res.message)){    dialogUserData = res.data  }}

这样，当你调用 getUsers 函数并接收到新的数据时，dialogUserData 将被更新，Vue 将自动检测到这种变化并重新渲染 el-table。

最后，请注意，你应该确保 systemService.getUsers 函数正确返回了你期望的数据，并且 checkCode 函数正确地处理了响应代码和消息。