ant-design-vue表格Table行内新增、编辑、删除-Toy模板网

这篇具有很好参考价值的文章主要介绍了ant-design-vue表格Table行内新增、编辑、删除。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

功能场景：

ant-design-vue表格Table进行单元格内新增、编辑、删除等操作
如图所示：
antdesignvue列表编辑,vue.js,前端文章来源地址https://www.toymoban.com/news/detail-620214.html

实现代码

<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() {
      // ...获取列表数据
    },
    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')) {
          // 调用新增接口
        } else {
          // 调用编辑接口
        }
        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: '确认删除吗？',
        onOk: async () => {
           // ... 调删除API
           this.$message.success('删除成功');
           this.getList();
        }
      });
    }
  }
};
</script>