<template>
  <el-form-item :label="itemName">
    <div style="overflow:auto;">
      <el-table :data="formData[keyValue]" style="min-width:700px">
        <el-table-column prop="label" label="字段名">
          <template #default="scope">
            <el-input v-model="formData[keyValue][scope.$index]['label']" />
          </template>
        </el-table-column>
        <el-table-column prop="value" label="字段值">
          <template #default="scope">
            <el-input v-model="formData[keyValue][scope.$index]['value']" />
          </template>
        </el-table-column>
        <el-table-column prop="" label="" width="50">
          <template #default="scope">
            <el-button size="small" type="danger" :icon="Delete" circle @click="delItem(scope.$index)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-button @click="onAddItem">
      添加字段
    </el-button>
  </el-form-item>
</template>
<script lang="ts" setup>
import {
  Delete
} from '@element-plus/icons-vue';

const props = defineProps({
  formData: String,
  keyValue: String,
  itemName: String
});

const { formData, keyValue, itemName } = toRefs(props);

const onAddItem = () => {
  formData.value[keyValue.value].push({
    value: '',
    label: ''
  });
};
const delItem = (e) => {
  formData.value[keyValue.value].splice(e, 1);
};
</script>
<style scoped lang="less">
</style>



