Vue使用AntDesign 表格可添加 可編輯行 可選擇
使用的是這個進行修改的，這個是綁定的數組，多以直接在里面多加一行空數據就可進行編輯
在<template></template>中 只是多了一個添加的按鈕
<template>
<div class="map">
<!-- 添加行的按鈕 -->
<button @click="add">添加</button>
<!-- 顯示的表格 -->
<a-table
:columns="columns"
:data-source="data"
bordered
>
<template v-for="col in ['name', 'age', 'address']" :slot="col" slot-scope="text, record,">
<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,">
<div class="editable-row-operations">
<span v-if="record.editable">
<a @click="() => save(record.key)">保存</a>
<a-popconfirm
title="確定取消?"
okText="確定"
cancelText="取消"
@confirm="() => cancel(record.key)"
>
<a>取消</a>
</a-popconfirm>
</span>
<span v-else>
<a :disabled="editingKey !== ''" @click="() => edit(record.key)">修改</a>
</span>
</div>
</template>
</a-table>
</div>
</template>
在<script></script>
<script>
//顯示的表頭
const 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" }
}
];
//列表綁定的數組
const data = [];
// 數組創建時候的下標
var numbe = 0;
export default {
data() {
//這是將數組里面的值單列出來 用的是ES6的語法 （在添加的方法里面也進行調用 因為數據變化了 所以取值）
this.cacheData = data.map(item => ({ ...item }));
return {
data,
columns,
editingKey: "",
selectedRowKeys: []
};
},
methods: {
//書寫添加的按鈕
add() {
data.push({
key: numbe.toString(),
name: "",
age: "",
address: ""
});
numbe++;
//console.log(data);
//重新取值
this.cacheData = data.map(item => ({ ...item }));
},
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;
}
},
onSelectChange(selectedRowKeys) {
console.log("selectedRowKeys changed: ", selectedRowKeys);
this.selectedRowKeys = selectedRowKeys;
}
},
computed: {
hasSelected() {
return this.selectedRowKeys.length > 0;
}
}
};
</script>
這樣就可以進點擊按鈕添加數據了
在表格里面進行添加復選框
//在table上面書寫結構
<span style="margin-left: 8px">
<template v-if="hasSelected">{{ `Selected ${selectedRowKeys.length} items` }}</template>
</span>
//在table上面添加這個 將值傳入
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
//data里面添加數據
selectedRowKeys: [], // Check here to configure the default column
//添加改變的方法調用
onSelectChange(selectedRowKeys) {
console.log('selectedRowKeys changed: ', selectedRowKeys);
this.selectedRowKeys = selectedRowKeys;
},
//添加計算屬性
computed: {
hasSelected() {
return this.selectedRowKeys.length > 0;
},
},
然后是全部代碼
<template>
<div>
<button @click="add">添加</button>
<span style="margin-left: 8px">
<template v-if="hasSelected">{{ `Selected ${selectedRowKeys.length} items` }}</template>
</span>
<a-table
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
:columns="columns"
:data-source="data"
bordered
>
<template v-for="col in ['name', 'age', 'address']" :slot="col" slot-scope="text, record,">
<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,">
<div class="editable-row-operations">
<span v-if="record.editable">
<a @click="() => save(record.key)">保存</a>
<a-popconfirm
title="確定取消?"
okText="確定"
cancelText="取消"
@confirm="() => cancel(record.key)"
>
<a>取消</a>
</a-popconfirm>
</span>
<span v-else>
<a :disabled="editingKey !== ''" @click="() => edit(record.key)">修改</a>
</span>
</div>
</template>
</a-table>
</div>
</template>
<script>
const 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" }
}
];
const data = [];
// 數組創建時候的下標
var numbe = 0;
export default {
data() {
this.cacheData = data.map(item => ({ ...item }));
return {
data,
columns,
editingKey: "",
selectedRowKeys: []
};
},
methods: {
add() {
data.push({
key: numbe.toString(),
name: "",
age: "",
address: ""
});
numbe++;
console.log(data);
this.cacheData = data.map(item => ({ ...item }));
},
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;
}
},
onSelectChange(selectedRowKeys) {
console.log("selectedRowKeys changed: ", selectedRowKeys);
this.selectedRowKeys = selectedRowKeys;
}
},
computed: {
hasSelected() {
return this.selectedRowKeys.length > 0;
}
}
};
</script>
<style scoped>
.editable-row-operations a {
margin-right: 8px;
}
</style>