vue3：使用antdeisgn表格对表格进行移除，修改

<template>
  <a-dropdown :trigger="['click']" v-model:visible="visible">
    <a-button class="ant-dropdown-link" @click.prevent>
      Click me
    </a-button>
    <template #overlay>
      <a-menu @click="handleMenuClick">
        <a-menu-item v-for="(item, index) in columns" :key="index">
          <div class="xiala">
            <div>
              <a-checkbox :checked="item.show" @change="(e) => { columnsCheck(e.target.checked, columns, index) }">
              </a-checkbox>
            </div>
            <div style="margin-left:5px">
              <a-input v-model:value="editHeader[item.dataIndex].title" placeholder="请输入" v-if="item.isEdit" />
              <span v-else>{{ item.title }}</span>
            </div>
            <div v-if="!item.isEdit" style="margin-left:5px">
              <a-button type="primary" size="small" @click="editHeadr(item)">编辑</a-button>
            </div>
            <div v-else class="xiala">
              <div style="margin-left:5px">
                <a-button type="primary" size="small" @click="saveHeader(item)">保存</a-button>
              </div>
              <div style="margin-left:5px">
                <a-button type="primary" size="small" @click="cancelHeader(item)">取消</a-button>
              </div>
            </div> 
          </div>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
  <a-table :columns="columns.filter((col, num) => { if (col.show) { return col } })" :data-source="dataSource" bordered>
    <template #bodyCell="{ column, text, record }">
      <template v-if="['name', 'age', 'address'].includes(column.dataIndex)">
        <div>
          <a-input v-if="editableData[record.key]" v-model:value="editableData[record.key][column.dataIndex]"
            style="margin: -5px 0" />
          <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>
</template>
<script>
import { cloneDeep } from 'lodash-es';
import { defineComponent, reactive, ref } from 'vue';
import { DownOutlined } from '@ant-design/icons-vue';

const columns = ref([{
  title: 'name',
  dataIndex: 'name',
  width: '25%',
  show: true,
  isEdit: false,
}, {
  title: 'age',
  dataIndex: 'age',
  width: '15%',
  show: true,
  isEdit: false,
}, {
  title: 'address',
  dataIndex: 'address',
  show: true,
  isEdit: false,
  width: '40%',
}, {
  title: 'operation',
  dataIndex: 'operation',
  show: true,
  isEdit: false,
}]);

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}
export default defineComponent({
  setup() {
    const dataSource = ref(data);
    const editableData = reactive({});
    const edit = 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];
    };

    const visible = ref(false);
    const columnsCheck = (checked, data, index) => {
      data[index].show = checked;
    }
    const handleMenuClick = e => {
      // if (e.key === '3') {
      visible.value = true;
      // }
    };

    const editHeader = reactive({});
    const editHeadr = (item) => {
      item.isEdit = true;
      editHeader[item.dataIndex] = cloneDeep(columns.value.filter(column => column.dataIndex == item.dataIndex)[0]);
    }
    const saveHeader = (item) => {
      item.isEdit = false;
      editHeader[item.dataIndex].isEdit = false;
      Object.assign(columns.value.filter(column => column.dataIndex == item.dataIndex)[0], editHeader[item.dataIndex])
    }
    const cancelHeader = (item) => {
      item.isEdit = false;
      editHeader[item.dataIndex].isEdit = false;
      delete editHeader[item.dataIndex];
    }
    const add = () => {}
    return {
      dataSource,
      columns,
      editingKey: '',
      editableData,
      edit,
      save,
      cancel,
      visible,
      columnsCheck,
      handleMenuClick,
      cancelHeader,
      saveHeader,
      editHeadr,
      add,
      editHeader,
    };
  },
});
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}

.xiala {
  display: flex;
  justify-content: space-between;
 align-items: center;
}
</style>