首页 前端知识 关于antd vue 中table的单元格单击或者双击某个编辑事件,配合customCell的用法,可以编辑某一个单元格。

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

2024-08-08 23:08:39 前端知识 前端哥 388 337 我要收藏

需求:动态生成一个单元格,点击生成的某一个单元格可以修改他的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]);
};

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15098.html
标签
评论
发布的文章

Jquery (第三章笔记)

2024-08-18 00:08:37

jquery实现tab切换简单好用

2024-08-18 00:08:35

jQuery Cookie 插件使用教程

2024-08-14 22:08:01

jQuery的DOM操作

2024-08-18 00:08:21

echarts显示中国地图

2024-08-18 00:08:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!