<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link type="text/css" rel="stylesheet" href="./antdesignvue1410/antd.min.css"/>
<!-- vue 版本需要注意，不是每一个版本都起作用的 -->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="./antdesignvue1410/antd.min.js"></script>
<!-- 引入 moment.min.js -->
<script src="./antdesignvue1410/moment.min.js"></script>
</head>
<body>
<div id="app">
<template>
<a-table :columns="columns" :data-source="dataSource">
<!--用v-for遍历模板，直接渲染三个插槽-->
<template
v-for="(col,i) in [‘age‘,‘name‘, ‘address‘]"
:slot="col"
slot-scope="text, record, index"
>
<div :key="col">
<a v-if="record.editable==false" >{{text}}</a>
<!--如果record.editable为true，则展示input框，可以修改数据，为false则直接展示数据 -->
<a-input
v-if="record.editable"
style="margin: 0px 0"
:value="text"
@change="e => handleChange(e.target.value, record.key, col)"
/>
</div>
</template>
<template slot="operation" slot-scope="text, record">
<a-popconfirm
v-if="dataSource.length"
title="Sure to delete?"
@confirm="() => onDelete(record.key)">
<a href="javascript:;">Delete</a>
</a-popconfirm>
<a-popconfirm
v-if="dataSource.length"
title="Sure to handleAdd?"
@confirm="() => handleAdd()">
<a href="javascript:;">add</a>
</a-popconfirm>
<span >
<a @click="() => edit(record.key)">Edit</a>
<a @click="() => save(record.key)">Save</a>
</span>
</template>
</a-table>
</template>
</div>
</body>
<script>
var columns =[
{title: ‘name‘,dataIndex: ‘name‘,width: ‘25%‘,scopedSlots: { customRender: ‘name‘ }},
{title: ‘age‘,dataIndex: ‘age‘,width: ‘15%‘,scopedSlots: { customRender: ‘age‘ }},
{title: ‘address‘,dataIndex: ‘address‘,width: ‘40%‘,scopedSlots: { customRender: ‘address‘ }},
{title: ‘operation‘,dataIndex: ‘operation‘,scopedSlots: { customRender: ‘operation‘ }}
];
var data = [];
for (let i = 0; i < 15; i++) {
data.push({
key: i.toString(),
name: `Edrward ${i}`,
age: 32,
editable:false,
address: `London Park no. ${i}`,
});
};
var vue = new Vue({
data() {
this.cacheData = data.map(item => ({ ...item })); //缓存所有数据
return {
dataSource:data,
columns:columns,
count: 15,
};
},
methods: {
onCellChange (key, dataIndex, value) {
//
//
console.log(key);
console.log(dataIndex);
console.log(value);
const dataSource = [...this.dataSource]
const target = dataSource.find(item => item.key === key)
if (target) {
target[dataIndex] = value
this.dataSource = dataSource
}
},
/**
* 修改完成之后点击保存的回调方法
* @param key 当前行对应的key值
*/
save(key) {
const newData = [...this.dataSource];
console.log(newData);
const newCacheData = [...this.cacheData];
console.log(newCacheData);
const target = newData.filter(item => key === item.key)[0];
const targetCache = newCacheData.filter(item => key === item.key)[0];
if (target && targetCache) {
target.editable=false; // 删除editable属性
this.dataSource = newData;
Object.assign(
targetCache,
target
);
console.log(this.cacheData);
console.log(newCacheData);
this.cacheData = newCacheData;
}
},
/**
* 点击操作栏中修改的回调方法
* @param key 当前行对应的key值
*/
edit(key) {
const newData = [...this.dataSource];// 直接获取了所有数据
const target1 = newData.filter(item => key === item.key)[0]; // 在筛选出key值相同的那一条数据
if (target1) { // 如果数据存在，则给这条数据新增一个属性为editable属性为true => 代表为正在更改中
target1.editable = true;
this.dataSource = newData;
}
console.log(target1);
},
/**
* input的change的回调方法
* @param value input框中你输入的值
* @param key 当前行对应的key值
* @param column 当前列的dataIndex对应的名称，有[‘name‘,‘age‘,‘address‘]
*/
handleChange(value, key, column) {
const newData = [...this.dataSource];
const target = newData.filter(item => key === item.key)[0];
console.log(column);
if (target) {
target[column] = value;
this.dataSource = newData;
}
},
onDelete (key) {
const dataSource = [...this.dataSource]
this.dataSource = dataSource.filter(item => item.key !== key)
},
handleAdd () {
const { count, dataSource } = this
const newData = {
key: count,
name: `Edward King ${count}`,
age: 32,
editable:false,
address: `London, Park Lane no. ${count}`,
}
this.dataSource = [...dataSource, newData]
this.count = count + 1
},
},
}).$mount(‘#app‘);
</script>
</html>https://www.cnblogs.com/cirry/p/12459729.html
