vxe-table 插入数据的问题记录【总结思考】

问题描述

我们使用vxe-table进行表格的 *** 作，现在需要对表格的内容进行新增一行，我尝试直接复制官网的实例，但是却报错了

附上 官网链接

解决过程

当前现在解决代码是

const xTabless = ref({} as VxeTableInstance);
const insertEvent = async (row: any) => {
  const $table = xTabless.value;
  const record: RecordInfo = {
    course: "",
    Mon: "",
    Tues: "",
    Wed: "",
    Thur: "",
    Fri: "",
    Sat: "",
    Sun: "",
  };
  const { row: newRow } = await $table.insertAt(record, row);

  await $table.setActiveCell(newRow, "course");
};

基本上和官网的实例一模一样，但是就是报错。

于是我尝试在官网寻找更多有关的信息，我开始查询xTable

结果发现在HTML中也需要添加一个ref，和ts中定义的xTable同名

最终的解决方案

详细代码就不贴了，大概的解决思路就是在html对应的vxe-table中添加一个ref

<template>
  <n-space justify="space-between">
    <n-button type="primary" size="medium" @click="insertEvent(-1)">新增一列</n-button>

  </n-space>
  <div class="my-4">
    <vxe-table
      ref="xTable"
    >

    </vxe-table>
  </div>

</template>

<script setup lang="ts">
import { ref } from "vue";
import { RecordInfo, VxeTableInstance } from "vxe-table/types/all";



const xTable = ref({} as VxeTableInstance);
const insertEvent = async (row: any) => {
  const $table = xTable.value;
  const record: RecordInfo = {
    course: "",
    Mon: "",
    Tues: "",
    Wed: "",
    Thur: "",
    Fri: "",
    Sat: "",
    Sun: "",
  };
  const { row: newRow } = await $table.insertAt(record, row);

  await $table.setActiveCell(newRow, "course");
};

</script>

总结思考

在解决这个问题前，我尝试对xTable变量去点，去打印，看看内部到底有哪些函数，但是ref是一个Proxy对象，好像暂时看不见对应的函数。

但是我尝试使用这个变量去触发方法是可以拿到对应的方法的，于是我尝试百度，想到是不是导入的顺序问题……

最后我尝试 查询有关每一个变量的更多信息

还有就是对Vue3中的ref对应的对象的理解，ref直接对应到HTML中的DOM元素，这也很符合Vue框架的核心思想（数据驱动视图）

我们无需关注更多的HTML的书写，而是更加可以关注数据与视图之间的关系，通过ref获取到节点