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也是对象数组