欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Ant 表格行编辑 VUE

程序员文章站 2022-06-07 22:10:28
...

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="() => save(record.key)">Save</a>
          <a-popconfirm title="Sure to cancel?" @confirm="() => cancel(record.key)">
            <a>Cancel</a>
          </a-popconfirm>
        </span>
        <span v-else>
          <a :disabled="editingKey !== ''" @click="() => edit(record.key)">Edit</a>
        </span>
      </div>
    </template>
  </a-table>
</template>
<script>
const columns = [
  {
    title: '属性(中文)',
    key: 'keyCN',
    align: 'center',
    width: '20%',
    dataIndex: 'keyCN'
  },
  {
    title: '属性(日文)',
    align: 'center',
    dataIndex: 'keyJA',
    width: '20%',
    key: 'keyJA',
    scopedSlots: { customRender: 'keyJA' }
  },
  {
    title: '属性值(中文)',
    key: 'valueCN',
    width: '20%',
    align: 'center',
    dataIndex: 'valueCN',
    scopedSlots: { customRender: 'valueCN' }
  },
  {
    title: '属性值(日文)',
    width: '20%',
    key: 'valueJA',
    align: 'center',
    dataIndex: 'valueJA',
    scopedSlots: { customRender: 'valueJA' }
  },
  {
    title: '操作',
    width: '20%',
    key: 'action',
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
];

const data = [
{
    id: 1,
    keyCN: '颜色',
    keyJA: 'XXXX',
    valueCN: '红色',
    valueJA: 'XXXX'
  },
  {
    id: 2,
    keyCN: '颜色',
    keyJA: 'XXXX',
    valueCN: '红色',
    valueJA: 'XXXX'
  },
  {
    id: 3,
    keyCN: '颜色',
    keyJA: 'XXXX',
    valueCN: '红色',
    valueJA: 'XXXX'
  }
  ]
export default {
  data() {
    this.cacheData = data.map(item => ({ ...item }));
    return {
      data,
      columns,
      editingKey: '',
    };
  },
  methods: {
    handleChange(value, key, column) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    edit(key) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.data = newData;
      }
    },
    save(key) {
      const newData = [...this.data];
      const newCacheData = [...this.cacheData];
      const target = newData.filter(item => key === item.key)[0];
      const targetCache = newCacheData.filter(item => key === item.key)[0];
      if (target && targetCache) {
        delete target.editable;
        this.data = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = '';
    },
    cancel(key) {
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      this.editingKey = '';
      if (target) {
        Object.assign(target, this.cacheData.filter(item => key === item.key)[0]);
        delete target.editable;
        this.data = newData;
      }
    },
  },
};
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>

效果图:
Ant 表格行编辑 VUE