vue实现动态表格提交参数动态生成控件的操作_JavaScript

上面要求做一个根据后台数据动态生成控件，然后让用户输入提交查询信息，然后动态生成表格在显示出来。动态控件代码如下

				?

									<el-form

									    :model="formData"

									    style="padding: 0 5px;">

									    <div v-if="tableshow">

									    <div v-for="(item,i) in control" :key="i" style="padding-left:10px; float:left" >

									     <el-form-item

									     v-if="item.type=='input'"

									     :key="item.name"

									     :prop="item.name"

									     label-width="100px">

									     <label slot="label">{{ item.cnname }}:</label>

									     <el-input v-model="item.value" size="mini" style="width: 100px; padding-right: 5px;"/>

									     </el-form-item>

									     <el-form-item

									     v-if="item.type=='time'"

									     :key="item.name"

									     :prop="item.name"

									     label-width="100px">

									     <label slot="label">{{ item.cnname }}:</label>

									     <el-date-picker

									      v-model="item.value"

									      value-format="yyyy-MM-dd HH:mm:ss"

									      type="date"

									      placeholder="选择日期"/>

									     </el-form-item>

									    </div>

									    <div style="padding-left:10px; float:left">

									     <el-form-item prop="name" style="width: 20px; margin-bottom: 0px;">

									     <el-button class="filter-item" type="primary" icon="el-icon-search" size="mini" @click="cmdsearch">

									      {{ $t('table.search') }}

									     </el-button>

									     </el-form-item>

									    </div>

									    </div>

									   </el-form>

data格式如下

				?

									control: [{

									 name: 'input1',

									 cnname: '输入框1',

									 type: 'input',

									 value: '这里'

									 }, {

									 name: 'time1',

									 cnname: '时间范围',

									 type: 'time',

									 value: null

									 }]

还要监听所有控件变化

				?

									computed: {

									// 监听所有控件变化

									formData: function() {

									 var formData = {}

									 this.control.forEach((item) => {

									 formData[item.name] = item.value

									 })

									 return formData

									}

									}

动态表格如下

				?

									<el-table

									    v-if="tableshow"

									    id="exportTab"

									    ref="multipleTable"

									    :data="tables"

									    border="true"

									    tooltip-effect="dark"

									    style="width: 100%;"

									    @selection-change="selectArInfo">

									    <el-table-column fixed="left" label="序号" width="62px" type="index"/>

									    <template v-for="(col) in tableData">

									    <el-table-column

									     :show-overflow-tooltip="true"

									     :formatter="fmtLength"

									     :prop="col.dataItem"

									     :label="col.dataName"

									     :key="col.dataItem"

									     resizable="true"

									     width="120px"/>

									    </template>

									   </el-table>

需要两个数组，一个保存表格列名，一个保存表格数据

				?

									tables: [], 

									 tableData: [dataItem: xxx,

									  dataName: xxx], //保存表格列名

补充知识：vue table表格的使用(动态数据展示)

第一种方式

				?

									<el-table :data="tableDataalllist" border style="width: 100%" @sort-change="totalusercount">

									  <el-table-column :label="head" :prop="head" v-for="(head, index) in header" :key="head" :sortable="定义自定义排序项">

									  <template slot-scope="scope">

									  {{tableDataalllist[scope.$index][index]}} // 当前行数据 接收两个参数scope.$index; scope.row

									  <template>

									  <el-table-column>

									 <el-table>

									<script>

									 export default{

									  data(){

									   return{

									   // 数据结构

									    tableDataalllist:[{

									     1,'张三','23'

									    },{

									     2,'李四','15'

									    },{

									     3,'王五','18'

									    }],

									    header:['id','name','age']

									   } 

									  },

									  methods:{

									  // 接受一个obj参数

									   totalusercount(obj){

									    console.log(obj.prop) // 排序规则

									    console.log(obj.order) // 排序方式

									   }

									  }

									 }

									</script>

id	name	age
1	张三	23
2	李四	15
3	王五	18

第二种方式(动态进行列的添加)

				?

									<el-table :data="gameareatable" v-loading="cardBuyConsumeDataLoading" v-if="gameareatable.length> 0">

									 <el-table-column align="center" v-for="(item,index) in activePlayerDataPropLabelArray" :prop="item.prop" :label="item.label"

									  :key="item.prop">

									  <template slot-scope="scope">

									  {{scope.row[item.prop]?scope.row[item.prop]:'暂无数据'}}

									  </template>

									 </el-table-column>

									 </el-table>

									export default {

									 data(){

									  return{

									  // 数据结构 activePlayerDataPropLabelArray为label标签显示label表示当前列th的显示的值,prop表示当前'日期'列下显示date数据,'斗地主'列下显示prop为12的数据,'麻将'列下显示prop为15的数据,

									   activePlayerDataPropLabelArray:[{

									    label:'日期',

									    prop:'date'

									   },{

									    label:"斗地主",

									    prop:"12"

									   },{

									    label:'麻将',

									    prop:'15'

									   }],

									   gameareatable:[{

									    date:"2018-09-10",

									    12:'老k',

									    15:'一万'

									   },{

									    date:"2018-08-01",

									    12:'炸弹',

									    15:'一条'

									   },{

									    date:"2018-08-02",

									    12:'对子',

									    15:'五筒'

									   }]

									  }

									 }

									}