Vue + element实现动态表格表单

在实际开发过程中，有可能遇到树结构+表格展示数据的要求。比如页面左边是Tree树型控件，右边为table表格。要求点击左边树，右边展示出对应的表格数据。表头不固定，其对应的查询条件表单也不固定。此时的表格表单都需要动态展示。

<!-- 树 -->
<el-tree
   :props="treeProps"
   :isLazy='false'
   :data="treeData"
   :highlight-current="true"
   :expand-on-click-node="false"
   @node-click="treeClick"
>
   <span
      slot-scope="{ node, data }"
      // 当前点击变色
      :class="{'node-active':data.name == clickData.name}"
   >{{node.label}}</span>
</el-tree>

<!-- 表格 -->
<el-table
  ref="table"
  :data="tableData"
  max-height="500"
>
  <el-table-column
        v-for="(col , i) in tableTitle"
        :key="i"
        :prop="col.value"
        show-overflow-tooltip
        :label="col.title"
        align="center"
    >
  </el-table-column>
</el-table>

<!-- 查询表单 -->
<el-form
  :inline="true"
  ref="searchForm"
  :model="searchForm"
>
  <el-form-item
    v-for="(form, i) in searchItems"
    :key="i"
    :label="form.label"
    :prop="form.prop"
  >
    <el-input
      v-model="searchForm[form.prop]"
      :clearable="form.clearable"
    ></el-input>
  </el-form-item>   
</el-form>

// 树点击事件
treeClick(data){
  this.clickData = node
  // 下面调用接口传递点击数据，拿到对应的动态表头和表单数据
  // 点击一个树节点后拿到的模拟数据
  this.tableTitle =             // 表头数据
   [
     {title:'姓名', value:'name'}
     {title: '性别', value: 'sex'}
     {title: '年龄', value: 'age'}
   ]
  this.tableData = [           // 表格数据
  	{name: 'Alice', sex: 'female', age: '22'}
  	{name: 'Bob', sex: 'male', age: '23'}
  ]
  this.searchItems = {		   // 查询表单数据
	{label: '姓名', prop:'name', clearable: true}
	{label: '性别', prop: 'sex', clearable: true}
  }
}