antdv表格求助
ant design vue3 的表格，想做一个可以直接在表格上编辑的功能，图1是正常表格，现在的问题是，点击父数据可以编辑，就是图2的效果，但是展开后，点击子类数据:John Brown , John Brown jr的edit就没反应，但是edit的console可以触发，就是无法编辑，input不显示代码
<template>
<a-row :gutter="16">
<a-col class="gutter-row" :span="8">
<a-card>
<a-form
:model="formState"
name="basic"
autocomplete="off"
@finish="onFinish"
@finishFailed="onFinishFailed"
>
<a-form-item
label="分类名称"
name="name"
:rules="[{ required: true, message: 'Please input your username!' }]"
>
<a-input v-model:value="formState.name"/>
</a-form-item>
<a-form-item
label="上级节点"
name="parent_id"
:rules="[{ required: true, message: 'Please input your password!' }]"
>
<a-select
ref="select"
v-model:value="formState.parent_id"
@focus="focus"
@change="handleChange"
>
<a-select-option value="0">一级分类</a-select-option>
<a-select-option value="lucy">Lucy</a-select-option>
</a-select>
<!-- <a-input v-model:value="formState.parent_id"/>-->
</a-form-item>
<a-form-item :wrapper-col="{ offset: 5, span: 16 }">
<a-button type="primary" html-type="submit">新建</a-button>
</a-form-item>
</a-form>
</a-card>
</a-col>
<a-col class="gutter-row" :span="16">
<a-card>
<a-table :columns="columns" :data-source="data" :row-selection="rowSelection">
<template #bodyCell="{ column, text, record }">
<template v-if="['name', 'age'].includes(column.dataIndex)">
<div>
<a-input
v-if="editableData"
v-model:value="editableData"
style="width: 190px"
/>
<template v-else>
{{ text }}
</template>
</div>
</template>
<template v-else-if="column.dataIndex === 'operation'">
<div class="editable-row-operations">
<span v-if="editableData">
<a-typography-link @click="save(record.key)">Save</a-typography-link>
<a-popconfirm title="Sure to cancel?" @confirm="cancel(record.key)">
<a>Cancel</a>
</a-popconfirm>
</span>
<span v-else>
<a @click="edit(record.key)">Edit</a>
</span>
</div>
</template>
</template>
</a-table>
</a-card>
</a-col>
</a-row>
</template>
<script setup>
import {cloneDeep} from 'lodash-es';
import {ref, reactive} from 'vue';
const editableData = reactive({});
const formState = reactive({
name: '',
parent_id: '',
remember: true,
});
const columns = [
{
title: '分类名',
dataIndex: 'name',
key: 'name',
},
{
title: '数量',
dataIndex: 'age',
key: 'age',
width: '20%',
},
{
title: '操作',
dataIndex: 'operation',
width: '30%',
key: 'address',
},
];
const data = [
{
key: 1,
name: 'John Brown sr.',
age: 60,
address: 'New York No. 1 Lake Park',
children: [
{
key: 2,
name: 'John Brown',
age: 42,
address: 'New York No. 2 Lake Park',
},
{
key: 3,
name: 'John Brown jr.',
age: 30,
address: 'New York No. 3 Lake Park',
}
],
},
{
key: 4,
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
children: [
{
key: 5,
name: 'John Brown',
age: 42,
address: 'New York No. 2 Lake Park',
},
{
key: 6,
name: 'John Brown jr.',
age: 30,
address: 'New York No. 3 Lake Park',
}
],
},
];
const rowSelection = ref({
checkStrictly: false,
onChange: (selectedRowKeys, selectedRows) => {
console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
},
onSelect: (record, selected, selectedRows) => {
console.log(record, selected, selectedRows);
},
onSelectAll: (selected, selectedRows, changeRows) => {
console.log(selected, selectedRows, changeRows);
},
});
const dataSource = ref(data);
const edit = key => {
console.log(key)
editableData = cloneDeep(dataSource.value.filter(item => key === item.key));
};
const save = key => {
Object.assign(dataSource.value.filter(item => key === item.key), editableData);
delete editableData;
};
const cancel = key => {
delete editableData;
};
</script>
<style scoped>
</style>
const edit = key => {
console.log(key)
editableData = cloneDeep(dataSource.value.filter(item => key === item.key));
};
问题在这里，子数据你的filter是过滤不出来的 matengwode2009 发表于 2024-2-22 15:17
const edit = key => {
console.log(key)
editableData = cloneDeep(dataSource.value.filter(i ...
大佬，除了filter还有其他方法吗
页:
[1]