功能場景：

ant-design-vue表格Table進行單元格內(nèi)新增、編輯、刪除等操作
如圖所示：
文章來源地址http://www.zghlxwxcb.cn/news/detail-620214.html

實現(xiàn)代碼

<template>
  <div>
    <a-button type="primary" :disabled="disabled" @click="add" />
    <a-table
      :columns="columns"
      :data-source="dataSource"
      row-key="serialNumber"
      :loading="loading"
      :pagination="false"
      :scroll="{ y: 500 }"
    >
      <template slot="name" slot-scope="text, record">
        <a-input v-if="record.id === editingKey" v-model="record.name" :max-length="50" />
        <span v-else>
          {{ text }}
        </span>
      </template>
      <template slot="action" slot-scope="text, record">
        <span v-if="record.id === editingKey">
          <a href="javascript:" @click="save(record)">保存</a>
          <a-divider type="vertical" />
          <a href="javascript:" @click="cancel(record.id)">取消</a>
        </span>
        <span v-else>
          <a href="javascript:" :disabled="disabled" @click="edit(record.id)"> 編輯 </a>
          <a-divider type="vertical" />
          <a href="javascript:" :disabled="disabled" @click="del(record.id)"> 刪除 </a>
        </span>
      </template>
    </a-table>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash';

const columns = [
  {
    title: '序號',
    dataIndex: 'serialNumber'
  },
  {
    title: '名稱',
    dataIndex: 'name',
    width: 250,
    scopedSlots: { customRender: 'name' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' }
  }
];

export default {
  data() {
    return {
      columns,
      dataSource: [],
      cacheData: [],
      loading: false,
      editingKey: '',
      disabled: false,
      addId: ''
    };
  },

  mounted() {},

  methods: {
    getList() {
      // ...獲取列表數(shù)據(jù)
    },
    add() {
      this.addId = `new${this.dataSource.length + 1}`;
      let newObj = {
        id: this.addId,
        serialNumber: this.dataSource.length + 1,
        name: ''
      };
      this.dataSource.push(newObj);
      this.edit(newObj.id);
    },
    edit(id) {
      this.cacheData = cloneDeep(this.dataSource);
      this.editingKey = id;
      this.disabled = true;
    },
    async save(record) {
      if (!record.name) {
        this.$message.error('請輸入名稱');
      } else {
        let params = cloneDeep(record);
        if (params.id.startsWith('new')) {
          // 調(diào)用新增接口
        } else {
          // 調(diào)用編輯接口
        }
        this.$message.success('保存成功');
        this.editingKey = '';
        this.disabled = false;
        this.getList();
      }
    },
    cancel() {
      // 新增若取消則pop最后一條，編輯若取消用緩存cacheData覆蓋
      const idx = this.dataSource.findIndex(item => item.id === this.addId);
      if (idx >= 0) {
        this.dataSource.pop();
        this.cacheData.pop();
      }
      this.dataSource = this.cacheData;
      this.editingKey = '';
      this.disabled = false;
    },
    // 刪除
    async del(id) {
      this.$confirm({
        title: '確認(rèn)刪除嗎？',
        onOk: async () => {
           // ... 調(diào)刪除API
           this.$message.success('刪除成功');
           this.getList();
        }
      });
    }
  }
};
</script>

到了這里，關(guān)于ant-design-vue表格Table行內(nèi)新增、編輯、刪除的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！