vue+antD 表格中使用input

vue+antD 表格中使用input

在这里插入代码片
<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 -- ["蓝牙","遥控器"],
  该数据用于批量增加，根据字符串判断增加几个，并直接回填到属性名上
  
  批量增加如下图