Html：
<a-table
<!--
* 表格栏:
* columns: 表格列的配置描述
* rowKey: 表格行 key 的取值
* dataSource: 数据数组
* pagination: 分页器
* loading: 是否加载中
-->
:columns="columns"
:dataSource="dataSource"
rowKey="key"
bordered
:loading="memberLoading" //加载
:pagination="false">
<template v-for="col in ['caption', 'name', 'desc']" :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, col)"
/>
<template v-else>{{ text }}</template>
</div>
</template>
<template slot="handle" slot-scope="text, record, index">
<span v-if="record.editable">
<span v-if="record.isNew">
<a-button style="margin-right: 4px;" size="small" @click="handleSave(record)">添加</a-button>|
<a-button size="small" @click="handleAddCancle(record)">取消</a-button>|
</span>
<span v-else>
<a-button style="margin-right: 4px;" size="small" @click="handleSave(record)">保存</a-button>|
<a-button size="small" @click="handleEditCancle(record)">返回</a-button>|
</span>
</span>
<span v-else>
<a-button style="margin-right: 4px;" size="small" @click="handleEdit(record)">编辑</a-button>|
<a-popconfirm title="确定删除该属性吗" @confirm="handleDelete(record, index)">
<a-button size="small">删除</a-button>
</a-popconfirm>
</span>
</template>
</a-table>
methods：
// table中input编辑时
handleChange (value, record, column) {
// console.log(record)
console.log('元数据属性编辑')
const newData = [...this.dataSource]
const target = newData.filter(item => record.id === item.id)[0]
if (target) {
target[column] = value
this.dataSource = newData
}
}
},
// 按编辑按钮时
handleEdit (record) {
const newData = [...this.dataSource]
const target = newData.filter(item => record.id === item.id)[0]
if (target) {
target.editable = true
delete target.isNew
this.dataSource= newData
}
},
handleDelete (record, index) {
// 模拟网络请求、卡顿 800ms
this.memberLoading = true
new Promise((resolve) => {
setTimeout(() => {
resolve({ loop: false })
}, 800)
}).then(() => {
// 删除元数据属性
this.axios.delete('/reports/metaproperty/' + record.id).then((res) => {
console.log(res)
this.memberLoading = false
})
})
},
// table添加行
add () {
// 数组头插值
this.dataSource.unshift({
id: '123456'
caption: '',
name: '',
desc: '',
propertyType: this.attrSelectType,
// 下面属性控制表格出现input框
editable: true,
isNew: true
})
},
// 添加取消
handleAddCancle (record) {
const newData = [...this.dataSource]
const target = newData.filter(item => item.id === record.id)[0]
if (target) {
Object.assign(target, this.cacheData.filter(item => record.id === item.id)[0])
this.dataSource = newData.slice(1)
delete target.editable
}
},
// 编辑取消
handleEditCancle (record) {
const newData = [...this.dataSource]
const target = newData.filter(item => item.id === record.id)[0]
if (target) {
Object.assign(target, this.cacheData.filter(item => record.id === item.id)[0])
delete target.editable
this.dataSource= newData
}
},
注意： 需要先在mounted初始化(取消的时候需要回复原始状态时使用)
this.cacheData = this.dataSource.map(item => ({ ...item }))
