vue 實作動态columns，通過背景資料庫存儲字段，不同的表顯示不同的列

問題：vue前台定義columns太麻煩，每次需要手工定好列，如何通過資料庫預留列字段，填充到前台columns中

<h-table autoHeadWidth="true" notSetWidth="true" :columns="example_columns" :data="example_data" size="small" no-data-text="沒有資料">
          </h-table>      

定義關鍵資料

data() {
    return {  
      example_columns: [],
      example_data: [],
    }
  }      

實作如下：

let url = global_.getExampleDataByTableId;
      Axios.get(url, {
        params: {
          'tableId': tableId,
        }
      }).then(res => {
        let tmpData = res.data;
        if (tmpData == null || tmpData.length == 0) {
          return;
        }
        let columns_name_array = tmpData.columns_info.split('|');
        let columns_name = [];
        for (let a in columns_name_array) {
          columns_name.push(eval("("+columns_name_array[a]+")"));
        }
        this.example_columns = columns_name ;

        let columns_data_arry = tmpData.data.split('|');
        let columns_data = [];
        for (let a in columns_data_arry) {
          columns_data.push(eval("("+columns_data_arry[a]+")"));
        }
        this.example_data = columns_data;
      })
        .catch(function (error) {
          alert("資料庫資訊擷取失敗：" + error);
        });      

背景存儲的資料為：

{'title':'client_id','key':'client_id'}|{'title':'branch_no','key':'branch_no'}|{'title':'dev_branch_no','key':'dev_branch_no'}|{'title':'client_card','key':'client_card'}|{'title':'client_name','key':'client_name'}|{'title':'full_name','key':'full_name'}|{'title':'corp_client_group','key':'corp_client_group'}|{'title':'corp_risk_level','key':'corp_risk_level'}|{'title':'asset_level','key':'asset_level'}|{'title':'client_gender','key':'client_gender'}|{'title':'nationality','key':'nationality'}|{'title':'organ_flag','key':'organ_flag'}|{'title':'id_kind','key':'id_kind'}|{'title':'id_no','key':'id_no'}|{'title':'id_begindate','key':'id_begindate'}|{'title':'id_enddate','key':'id_enddate'}|{'title':'open_date','key':'open_date'}|{'title':'cancel_date','key':'cancel_date'}|{'title':'confirm_date','key':'confirm_date'}|{'title':'client_status','key':'client_status'}|{'title':'position_str','key':'position_str'}|{'title':'aml_risk_level','key':'aml_risk_level'}|{'title':'corp_begin_date','key':'corp_begin_date'}|{'title':'corp_end_date','key':'corp_end_date'}|{'title':'corp_risk_type','key':'corp_risk_type'}|{'title':'corp_risk_comfirm','key':'corp_risk_comfirm'}|{'title':'etl_time','key':'etl_time'}|{'title':'data_date','key':'data_date'}      

看看每個變量的資料類型如下：

說明example_columns 是對象數組，同理example_data也是對象數組

作者：少帥