鍍金池/ 問答/HTML/ 使用element-ui的表格組件時,前端不能動態(tài)地獲取數(shù)據(jù)

使用element-ui的表格組件時,前端不能動態(tài)地獲取數(shù)據(jù)

我想實現(xiàn)一個查看歷史記錄的功能,表格目前只有三列,如下

圖片描述

使用的是element-ui的table組件,現(xiàn)在服務器可以從數(shù)據(jù)庫獲取數(shù)據(jù),前端控制臺也可以打印出數(shù)據(jù),但是前端頁面上顯示不出數(shù)據(jù)。另外,控制臺會報這個錯誤:Uncaught DOMException: Failed to execute 'setEnd' on 'Range': There is no child at offset 1

前端代碼如下:

<template>
...
          <div>
            <el-table
            :data="tableData3"
            border
            style="width: 100%">
            <el-table-column
              prop="experiment_name"
              label="Experiment Name"
              v-model="tableData3.experiment_name"
              width="180">
            </el-table-column>
            <el-table-column
              prop="modified_date"
              label="Modified Date"
              v-model="tableData3.modified_date"
              width="180">
            </el-table-column>
              <el-table-column
                prop="content"
                label="Content"
                v-model="tableData3.content"
                width="180">
              </el-table-column>
            </el-table>
  ...
</template>

<script>
...

    export default{
      data() {
        return {
          tableData3: [{
            experiment_name: '',
            modified_date: '',
            content: ''
          }]
        }
      },

      mounted: function(){
        this.getAbHistory();
      },

      methods:{
        getAbHistory(){
          axios.get("/historyScan/AbHistory").then(result =>{
            var res = result.data;
            if(res.status == "0"){
              let values = res.result.hbaseRst;
              let values_length = values.length;
              
              this.tableData3.experiment_name= values[0].key;
              this.tableData3.modified_date = values[0].timestamp;
              this.tableData3.content = values[0].$;
              console.log('Experiment Name is ' + this.tableData3.experiment_name);
              console.log( 'Modified date is ' + this.tableData3.modified_date);
              console.log('content is '+ this.tableData3.content);
            }
            else{
              this.$message.error('錯誤,無法獲取A/B test 歷史記錄');
            }
          });
        }
      }

    }
</script>

服務器端的代碼如下:

let express = require('express');
let router = express.Router();
let path = require('path');
let formidable = require('formidable');
let fs = require('fs');
let assert = require('assert');
let  hbase = require('hbase');

let client = hbase({
  host:'localhost',
  port:8010
});

router.get('/', function(req, res, next) {
  res.send('this is our history');
});

router.get('/AbHistory', function(req, res, next) {
  // scan hbase
  client
    .table('treatment_store')
    .scan({
      maxVersions: 1
    }, function(err, values){
      if (err === null) {
        console.log(err, values);
        res.json({
          status: '0',
          msg: '',
          result:{
            hbaseRst:values
          }
        });
      }
      else {
        res.json({
          status:'1',
          msg:'',
        });
      }
    });
});

module.exports = router;

scan Hbase后得到了一個hbaseRst數(shù)組,包含hbase的row key, timestamp,還有數(shù)據(jù):

[{ key: 'tantan-rec-male-mlc9990',
  column: 'f:content',
  timestamp: 1526974180912,
  '$': '{"experiment_name":"test","experiment_id":1,"hash_id":"222222","whitelists":[{"user_ids":[22],"treatment":"adf"}],"ramp":[{"treatment":"adf","percentage":100}]}' }]

我目前只想把row key, timestamp, 數(shù)據(jù)顯示在上面的表格里。大神能看看這個錯誤是什么原因嗎?
Uncaught DOMException: Failed to execute 'setEnd' on 'Range': There is no child at offset 1

回答
編輯回答
夢若殤

這個tableData3需要是數(shù)組,你把它賦值成了對象,其次,你不需要用v-model這個指令,這個指令是用來雙向綁定用的,你這里不需要,把element-ui文檔好好看下吧。

2018年7月11日 00:00
編輯回答
笑忘初
<el-table :data="tableData3" border style="width: 100%">
    <el-table-column prop="experiment_name" label="Experiment Name">
    </el-table-column>
    ...
</el-table>
2018年4月19日 19:01