需求:动态生成一个单元格,点击生成的某一个单元格可以修改他的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]);
};
四、已经成功了,可以点击修改尝试一下。若有任何技术问题,欢迎大家留言或者和我沟通。