element table渲染不出数据是怎么回事?

有数据,但是页面展示不出来
js:

let data = {"msg":"success","code":0,"querySqlResult":[{"columnList":[{"columnName":"rt_jzjy_entrust.cust_no","columnValue":"21038147  "},{"columnName":"rt_jzjy_entrust.entrust_date","columnValue":"20160725"},{"columnName":"rt_jzjy_entrust.entrust_time","columnValue":"09:15:30"}]}],"columnNameList":["rt_jzjy_entrust.cust_no","rt_jzjy_entrust.entrust_date","rt_jzjy_entrust.entrust_time"]}
this.sqldata = []
this.sqltablecolumn = data.columnNameList
data.querySqlResult.forEach(item=> {
  let obj = {}
  item.columnList.forEach(child=>{
    obj[child.columnName] = child.columnValue
  })
  this.sqldata.push(obj)
})

html:

<el-table :data="sqldata" max-height="500">
    <el-table-column
      show-overflow-tooltip
      v-for="(item,index) in sqltablecolumn"
      :property="item"
      :key="index"
      :label="item">
    </el-table-column>
  </el-table>

图片描述

请问这是什么原因造成的

阅读 10.1k
1 个回答

property的属性值不能包含点

更新:附element-ui部分源码

export function getPropByPath(obj, path, strict) {
  let tempObj = obj;
  path = path.replace(/\[(\w+)\]/g, '.$1');
  path = path.replace(/^\./, '');

  let keyArr = path.split('.');
  let i = 0;
  for (let len = keyArr.length; i < len - 1; ++i) {
    if (!tempObj && !strict) break;
    let key = keyArr[i];
    if (key in tempObj) {
      tempObj = tempObj[key];
    } else {
      if (strict) {
        throw new Error('please transfer a valid prop path to form item!');
      }
      break;
    }
  }
  return {
    o: tempObj,
    k: keyArr[i],
    v: tempObj ? tempObj[keyArr[i]] : null
  };
};

const DEFAULT_RENDER_CELL = function(h, { row, column, $index }) {
  const property = column.property;
  const value = property && getPropByPath(row, property).v;
  if (column && column.formatter) {
    return column.formatter(row, column, value, $index);
  }
  return value;
};
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏