element ui无法渲染数据

vue axios get api数据

<el-main>
            <el-table :data="tableDat">
              <el-table-column prop="chr" label="chr" width="140">
              </el-table-column>

<script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false ,
                tableData :null,
      },
      created(){
        axios.get('/snp').then(function (res) {
                this.tableData = res.data;
                console.log(tableData[10000].chr);
            }).catch(function (err) {
                console.log(err);
            })
      },
     
    })
  </script>

运行结果及报错内容

使用element ui组件库table无法渲染数据

我的解答思路和尝试过的方法

api /snp会返回json数据，普通get测试没有任何问题，是否是created里面内容写法问题导致

我想要达到的结果

你加个方法，把请求写入方法中