【element-ui】使用element-ui的表格组件时，前端不能动态地获取数据

我想实现一个查看历史记录的功能，表格目前只有三列，如下

图片描述

使用的是element-ui的table组件，现在服务器可以从数据库获取数据，前端控制台也可以打印出数据，但是前端页面上显示不出数据。另外，控制台会报这个错误：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数组，包含hbase的row key, timestamp，还有数据：

[{ 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, 数据显示在上面的表格里。大神能看看这个错误是什么原因吗？
Uncaught DOMException: Failed to execute 'setEnd' on 'Range': There is no child at offset 1

回答：

这个tableData3需要是数组，你把它赋值成了对象，其次，你不需要用v-model这个指令，这个指令是用来双向绑定用的，你这里不需要，把element-ui文档好好看下吧。

回答：

<el-table :data="tableData3" border style="width: 100%">
    <el-table-column prop="experiment_name" label="Experiment Name">
    </el-table-column>
    ...
</el-table>

以上是 【element-ui】使用element-ui的表格组件时，前端不能动态地获取数据 的全部内容， 来源链接： utcz.com/a/153281.html

回到顶部