Ant Design Vue 之a-tab单元格编辑
前言最近遇到一个需求,要求表格中某一属性是可以单独改变的。看了 Ant Design Vue 的官方组件,发现不太灵活,所以自己动手写了一下。官方实现先看一下官方demo演示效果发现只能整行编辑,不能单独针对某个属性进行单独编辑,例如只针对 name 或者 age 进行编辑。手动调整先看下效果在每列的后面增加了一个编辑icon ,点击后的效果如下整体效果如上图所示,此案例只展示了name。代码部分
·
前言
最近遇到一个需求,要求表格中某一属性是可以单独改变的。看了 Ant Design Vue
的官方组件,发现不太灵活,所以自己动手写了一下。
官方实现
先看一下官方demo演示效果
发现只能整行编辑,不能单独针对某个属性进行单独编辑,例如只针对 name
或者 age
进行编辑。
手动调整
先看下效果
在每列的后面增加了一个编辑icon
,点击后的效果如下
整体效果如上图所示,此案例只展示了name
。
代码部分
<template>
<a-table :columns='columns' :data-source='data' bordered>
<template
v-for="col in ['name']"
:slot='col'
slot-scope='text, record, index'
>
<div :key='col' style='float: left;margin-right: 0'>
<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>
<div style='float: right'>
<span v-if='record.editable'>
<a style='color: #2eabff;fontSize:15px;margin-left: 0;margin-right: 20px' @click='() => save(record.key)' >确定</a>
<a-popconfirm title='确认取消重命名?' @confirm='() => cancel(record.key)'>
<a type='close' style='color: #2eabff;fontSize:15px' >取消</a>
</a-popconfirm>
</span>
<span v-else>
<a-icon style='color: #2eabff;fontSize:20px' type='edit' :disabled="editingKey !== ''" @click='() => edit(record.key)' />
</span>
</div>
</template>
</a-table>
</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 = []
for (let i = 0; i < 100; i++) {
data.push({
key: i.toString(),
name: `Edrward ${i}`,
age: 32,
address: `London Park no. ${i}`
})
}
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]
console.log("target:",JSON.stringify(target))
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>
</style>
代码逻辑很简单,可以直接运行看下效果,如果想所有列都需编辑,扩充一下col
,定义一个变量,遍历需要编辑的列即可。例如
......伪代码.....
data() {
return {
editColumns:['name','age']//自行扩展即可
}
},
v-for="col in ['name']
调整为 v-for="col in editColumns
即可。
总结
Ant Design Vue 本身组件还是十分强大的,但是不会总会和你的需求完美契合的,需要自己慢慢摸索,以上的效果可能不是很美观,本人后端程序员一枚,请勿见怪。
更多推荐
已为社区贡献3条内容
所有评论(0)