<template>
<a-table :columns="columns" :data-source="data" bordered>
<template
v-for="col in ['name', 'time', 'workOrNo']"
:slot="col"
slot-scope="text, record, index"
>
<div :key="col">
<a-input
placeholder="请输入名称"
v-if="col == 'name'"
style="margin: -5px 0"
v-model="record.name"
:value="text"
/>
<a-date-picker
placeholder="请选择时间"
v-model="record.time"
:format="YYYY - MM - DD"
v-if="col == 'time'"
/>
<a-select
placeholder="请选择"
v-if="col == 'workOrNo'"
v-model="record.workOrNo"
style="width: 120px"
>
<a-select-option value="Yes"> Yes </a-select-option>
<a-select-option value="No"> No </a-select-option>
</a-select>
<!-- <template v-else>
{{ text }}
</template> -->
</div>
</template>
<template slot="operation" slot-scope="text, record, index">
<div class="editable-row-operations">
<span>
<a-button
type="primary"
shape="circle"
icon="plus"
@click="() => addItem(record.key)"
/>
<a-button
type="primary"
shape="circle"
icon="minus"
@click="() => deleteItem(record.key)"
/>
</span>
</div>
</template>
</a-table>
</template>
<script>
const columns = [
{
title: 'name',
dataIndex: 'name',
width: '25%',
scopedSlots: { customRender: 'name' },
},
{
title: 'time',
dataIndex: 'time',
width: '15%',
scopedSlots: { customRender: 'time' },
},
{
title: 'workOrNo',
dataIndex: 'workOrNo',
width: '40%',
scopedSlots: { customRender: 'workOrNo' },
},
{
title: 'operation',
dataIndex: 'operation',
scopedSlots: { customRender: 'operation' },
},
]
const data = []
data.push({
key: data.length,
name: '',
time: '',
workOrNo: 'No',
})
export default {
data () {
this.cacheData = data.map(item => ({ ...item }))
return {
key: 0,
data,
columns,
editingKey: ''
}
},
methods: {
addItem (key) {
console.log(key)
this.data.splice(key + 1, 0, {
key: '',
name: '',
time: '',
workOrNo: 'No',
})
this.data.forEach((item, index) => {
item.key = index
})
alert('所有的数据直接收集到data里面了,查看vue工具可以看收集的数据,给后台传参数的时候把这个数据处理一下,转换为后台需要的格式')
},
deleteItem (key) {
console.log(key)
if (this.data.length === 1) {
return
}
this.data.splice(key, 1)
this.data.forEach((item, index) => {
item.key = index
})
}
},
};
</script>
<style scoped>
.editable-row-operations a {
margin-right: 8px;
}
</style>
antd Vue可编辑table表格,输入框,下拉框,可添加删除
最新推荐文章于 2024-07-15 17:50:58 发布