Ant 表格行编辑 VUE

最新推荐文章于 2024-07-06 19:38:06 发布

天使的同类

最新推荐文章于 2024-07-06 19:38:06 发布

阅读量335

点赞数

分类专栏： vue.js 文章标签： vue.js ant 前端

本文链接：https://blog.csdn.net/Summer_JK/article/details/117356283

版权

本文介绍如何在 Vue 项目中使用 Ant Design Vue 库实现表格的行编辑功能，通过展示实际效果，帮助开发者理解其实施过程。

摘要由CSDN通过智能技术生成

Ant 表格行编辑 VUE

<template>
  <a-table :columns="columns" :data-source="data" bordered>
    <template
      v-for="col in ['keyJA', 'valueJA']"
      :slot="col"
      slot-scope="text, record, index"
    >
      <div :key="col">
        <a-input
          v-if="record.editable"
          style="margin: -5px 0"
          :value="text"
          @change="e => handleChange(e.target.value, record.key, col)"
        />
        <template v-else>
          {
  { text }}
        </template>
      </div>
    </template>
    <template slot="operation" slot-scope="text, record, index">
      <div class="editable-row-operations">
        <span v-if="record.editable">
          <a @click