elementUi + vue2 根据json生成form 和 table

你可以使用 Element UI 和 Vue 2 的组合来根据 JSON 数据生成表单和表格。以下是一个基本的示例：

首先，你需要在 Vue 中创建一个名为 `form` 的对象来存储表单数据。然后，你需要使用 `el-form` 组件来渲染表单，使用 `v-for` 指令来遍历 JSON 数据并动态生成表单元素。

<template>
  <div>
    <el-form :model="form" label-width="120px">
      <el-form-item v-for="(item, index) in formData" :key="index" :label="item.label">
        <el-input v-if="item.type === 'text'" v-model="form[item.field]" />
        <el-select v-if="item.type === 'select'" v-model="form[item.field]" :options="item.options" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {},
      formData: [
        {
          label: '姓名',
          field: 'name',
          type: 'text'
        },
        {
          label: '性别',
          field: 'gender',
          type: 'select',
          options: [
            {
              value: 'male',
              label: '男'
            },
            {
              value: 'female',
              label: '女'
            }
          ]
        }
      ]
    };
  }
};
</script>

接下来，你可以使用 `el-table` 组件来渲染表格，使用 `v-for` 指令遍历 JSON 数据并动态生成表格列。你还需要将表格数据存储在 `tableData` 中。

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column v-for="(item, index) in tableColumns" :key="index" :label="item.label" :prop="item.field" />
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      tableColumns: [
        {
          label: '姓名',
          field: 'name'
        },
        {
          label: '性别',
          field: 'gender'
        }
      ]
    };
  }
};
</script>

最后，你需要使用 `mounted` 钩子函数来初始化表单和表格数据。你可以使用 `Object.assign` 方法将 JSON 数据中的默认值合并到表单对象中，并将表格数据存储在 `tableData` 中。

mounted() {
  // 初始化表单数据
  this.formData.forEach(item => {
    this.$set(this.form, item.field, item.defaultValue || '');
  });

  // 初始化表格数据
  this.tableData = [
    {
      name: '张三',
      gender: '男'
    },
    {
      name: '李四',
      gender: '女'
    }
  ];
}

这就是使用 Element UI 和 Vue 2 根据 JSON 数据生成表单和表格的基本过程。当然，你也可以根据自己的需求对代码进行修改。