vue+antD 表格中使用input
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/bd049ee53622448963aaf28bde0bcac7.png)
在这里插入代码片
<template>
<div class="deviceInfoParam">
<div class="add">
<h3 :style="{ marginBottom: '16px' }">
设备参数
<a-button type="primary" icon="plus" @click="newSubData">设备参数</a-button>
<a-divider type="vertical" />
<a-button type="primary" icon="plus" @click="handleBatchAdd">批量新增</a-button>
</h3>
</div>
<a-table
:columns="subColumns"
:dataSource="subData"
:pagination="false"
:loading="subDataLoading"
>
<template v-for="(col, i) in ['element_name', 'element_value']" :slot="col" slot-scope="text, record">
<a-input
:key="col"
style="margin: -5px 0"
:value="text"
:placeholder="subColumns[i].title"
@change="e => handleChange(e.target.value, record.key, col, record)"
/>
</template>
<template slot="action" slot-scope="text, record">
<a-popconfirm title="是否要删除此行?" @confirm="subDataRemove(record.key,record)">
<a>删除</a>
</a-popconfirm>
</template>
</a-table>
</div>
</template>
<script>
const subColumns = [
{
title: '属性名',
key: 'element_name',
dataIndex: 'element_name',
scopedSlots: { customRender: 'element_name' }
},
{
title: '属性值',
key: 'element_value',
dataIndex: 'element_value',
scopedSlots: { customRender: 'element_value' }
},
{
title: '操作',
dataIndex: 'action',
width: '100px',
scopedSlots: { customRender: 'action' }
}
]
export default {
data () {
return {
subDataLoading: false,
deviceStyleParam: '',
deviceStyleParamData: [],
subColumns,
subData: [],
}
}
}
methods; {
subDataRemove (key, record) {
record.record_id === undefined
? this.subData = this.subData.filter(item => item.key !== key)
: this.subData = this.subData.filter(item => item.record_id !== record.record_id)
},
handleBatchAdd () {
const length = this.subData.length
if (this.deviceStyleParam === '') {
this.subData.push({
key: length === 0 ? length.toString() : (parseInt(this.subData[length - 1].key) + 1).toString(),
element_name: '',
element_value: ''
})
} else {
for (var i = 0; i < this.deviceStyleParamData.length; i++) {
this.subData.push({
key: i,
element_name: this.deviceStyleParamData[i],
element_value: ''
})
}
}
},
newSubData () {
const length = this.subData.length
this.subData.push({
key: length === 0 ? '0' : this.subData[length - 1].key === undefined
? length.toString() : (parseInt(this.subData[length - 1].key) + 1).toString(),
element_name: '',
element_value: ''
})
},
handleChange (value, key, column, record) {
const newData = [...this.subData]
if (record.record_id === undefined) {
this.target = newData.filter(item => key === item.key)[0]
} else {
this.target = newData.filter(item => record.record_id === item.record_id)[0]
}
if (this.target) {
this.target[column] = value
this.subData = newData
}
},
}
</script>
deviceStyleParam -- 蓝牙,遥控器,
deviceStyleParamData -- ["蓝牙","遥控器"],
该数据用于批量增加,根据字符串判断增加几个,并直接回填到属性名上
批量增加如下图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3db77ff1fcd40e29ac786c063ee891bf.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d8627c627392ae25e1e7f35a34825c70.png)