vue+Elment-UI 动态生成表格、动态生成搜索框

**

vue+Elment-UI 动态生成表格（包括表头，表头的个数、名称都未知）、动态生成搜索框

**

动态生成的input搜索框：

        <div style="display: inline-block;margin-left:5px" v-for="(item,index) in excel_header_name_list" :key="index">{
    
    {
    
    item.excel_header_name}}:<el-input v-model="fields_value[index]" clearable @keyup.enter.native="getData"></el-input></div>

该搜索框的显示文字（相当于label），和该input绑定的值都是动态的。excel_header_name_list是一个对象数组，存储搜索框显示的文字信息；fields_value是一个数组，存储查询字段的值（这里注意一下，搜索框在没有输入值的时候，会动态生成多少个搜索框，fields_value数组中就会有多少个undefined，而不是空字符串）。（excel_header_name_list和fields_value是需要事先做好排序一一对应的）

动态生成的数据表格：

 <el-table border :data="data_list" v-loading="loading" element-loading-text="loading" height="100%" >
        <el-table-column v-for="(item,index) in table_labels" :label="item" width="200" :prop="table_props[index]" :key="index" show-overflow-tooltip></el-table-column>
 </el-table>

其prop和label获取到后都存在数组中，注意要做好排序一一对应着存。

根据后端的要求，请求方式和传参格式如下：

当查询条件用户未填要传空字符串。

以下是我的根据用户输入的查询条件来查询数据的请求代码：
（excel_header_name_list是一个对象数组，存储搜索框显示的文字信息；fields_value是一个数组，存储查询字段的名称

 getTableDataAndProps(){
    
    
          var i=0;
          this.search_fields={
    
    }    //初始化： 存储 查询字段及其值 的对象
          this.excel_header_name_list.forEach(item=>{
    
    
            this.search_fields[item.excel_header_name]=this.fields_value[i]
            i++
          })
          //console.log(this.search_fields)
          let req_str=''      // 初始化： get请求时，发送的字符串参数
          for (var k in this.search_fields){
    
          //拼接字符串
            //console.log(k,this.search_fields[k])
            if(this.search_fields[k]==undefined){
    
    
              req_str+=k+'='+'&'		//由于用户未输入的字段fields_value数组存的是undefined，为满足后端要求，故将undefined换为空字符串
            }else{
    
    
              req_str+=k+'='+this.search_fields[k]+'&'
            }
          }
          //req_str=req_str.substr(0,req_str.length-1)
          console.log(req_str)
          this.$fetch(this.$path + 'lookup/dynamic_query/?type_name='+this.select_type_name+'&'+req_str+'size='+this.search_form.size+'&page='+this.search_form.page+'&page_count='+this.search_form.page_count+'&total_count='+this.search_form.total_count).then(res => {
    
    
            console.log(res)
            if(res.code==200){
    
    
              this.data_list=res.data.data      //数据表格的数据
              this.table_props=[]         //初始化： 存储数据表格的prop的数组
              res.data.fields.forEach(item=>{
    
    
                //console.log(item.toLowerCase())
                this.table_props.push(item.toLowerCase())
              })
              //console.log(this.table_props)
              //console.log(this.data_list)
              this.search_form.total_count = res.data.page_info.total_size
              this.search_form.page_count = res.data.page_info.total_page
              this.loading=false
            }else{
    
    
              this.loading=false
              this.data_list = []
            }
          })
        },