ant-design-vue表格Table行内新增、编辑、删除
ant-design-vue表格Table进行单元格内新增、编辑、删除等操作。
·
功能场景:
ant-design-vue表格Table进行单元格内新增、编辑、删除等操作
如图所示:
实现代码
<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>
更多推荐
所有评论(0)