antdv表格求助

qadan

ant design vue3 的表格，想做一个可以直接在表格上编辑的功能，图1是正常表格，现在的问题是，点击父数据可以编辑，就是图2的效果，但是展开后，点击子类数据:John Brown , John Brown jr  的edit就没反应，但是edit的console可以触发，就是无法编辑，input不显示









代码

[Asm] 纯文本查看 复制代码

<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[record.key]"
                    v-model:value="editableData[record.key][column.dataIndex]"
                    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[record.key]">
                <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[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
};
const save = key => {
  Object.assign(dataSource.value.filter(item => key === item.key)[0], editableData[key]);
  delete editableData[key];
};
const cancel = key => {
  delete editableData[key];
};
</script>
<style scoped>

</style>

matengwode2009

const edit = key => {
  console.log(key)
  editableData[key] = cloneDeep(dataSource.value.filter(item => key === item.key)[0]);
};
问题在这里，子数据你的filter是过滤不出来的

qadan

matengwode2009 发表于 2024-2-22 15:17
const edit = key => {
  console.log(key)
  editableData[key] = cloneDeep(dataSource.value.filter(i ...

大佬，除了filter还有其他方法吗