关于antd vue 中table的单元格单击或者双击某个编辑事件，配合customCell的用法，可以编辑某一个单元格。

最新推荐文章于 2025-03-31 14:59:29 发布

沙子迷了蜗牛眼

最新推荐文章于 2025-03-31 14:59:29 发布

阅读量2.7k

点赞数 8

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/m0_73008551/article/details/136617383

版权

本文介绍了如何在Vue应用中实现动态生成的表格单元格，点击单元格后可以实时编辑其文本值。通过`contentBeingEdited`和`editableDataField`实现数据管理和编辑状态控制，包括单元格点击事件、配置项和编辑事件的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：动态生成一个单元格，点击生成的某一个单元格可以修改他的text值。

首先看数据格式：这里因为是自己加的行，所以设定了一个随机id，大家可以通过index进行设置key也是可以的。相信也不难。

//添加行事件
const addRowClick = () => {
  dataSource.value.push({
    id: Math.random(),
    name: "无",
    title: "无",
    evaluation: "无",
  });
};

一、table结构：

contentBeingEdited：为自定义声明的string值，用于获取编辑的是哪一列

editableDataField：为动态编辑的对象，用来获取某一行，由此确定编辑某一个单元格

     <a-table
        class="a-table-style"
        row-key="id"
        :columns="columns"
        :data-source="dataSource"
        :pagination="false"
        :scroll="tableHeight"
      >
        <template #bodyCell="{ column, text, record }">
          <template v-if="[contentBeingEdited].includes(column.dataIndex)">
            <template v-if="editableDataField[record.id]">
              <template v-if="column.dataIndex === contentBeingEdited">
                <a-input
                  v-model:value="editableDataField[record.id][column.dataIndex]"
                  style="margin: -5px 0"
                />
              </template>
            </template>
            <template v-else>
              {{ text }}
            </template>
          </template>
        </template>
      </a-table>

二、配置项：

这里通过单元格点击cellEdit事件的单点事件，触发了cellEdit编辑函数，需要双击修改的可以使用onDblclick事件改为双击。cellEdit获取两个参数一个是当前行record和他的所在列值dataIndex。

const columns = ref([
  {
    title: "请选择参数或变量",
    dataIndex: "name",
    width: "25%",
    customCell: (record: any) => {
      return {
        onClick: () => {
          cellEdit(record, "name");
        },
      };
    },
  },
  {
    title: "请选择参数或变量",
    dataIndex: "title",
    width: "25%",
    customCell: (record: any) => {
      return {
        onClick: () => {
          cellEdit(record, "title");
        },
      };
    },
  },
  {
    title: "选择要赋值的变量",
    align: "center",
    dataIndex: "evaluation",
    width: "25%",
    customCell: (record: any) => {
      return {
        onClick: () => {
          cellEdit(record, "evaluation");
        },
      };
    },
  },
]);

const cellEdit = (record: any, name: string) => {
  // 排他：点击另一个格式，清空上一个点击编辑的，并保存数据
  dataSource.value.forEach((item: any) => {
    if (item.id !== record.id) {
      Object.assign(
        dataSource.value.filter((i: any) => item.id === i.id)[0],
        editableDataField[item.id],
      );
    } else {
      Object.assign(
        dataSource.value.filter((i: any) => record.id === i.id)[0],
        editableDataField[record.id],
      );
    }
    delete editableDataField[item.id];
  });
  // 赋值需要编辑的列
  contentBeingEdited.value = name;
  // 启动编辑-确定行
  editField(record.id);
};

三、编辑事件：

需要引入官方特定api

const contentBeingEdited = ref<any>({});
const editableDataField: UnwrapRef<Record<string, any>> = reactive({});
const editField = (id: string) => {
  editableDataField[id] = cloneDeep(dataSource.value.filter((item: any) => id === item.id)[0]);
};

四、已经成功了，可以点击修改尝试一下。若有任何技术问题，欢迎大家留言或者和我沟通。