如何制作动态表

Question

 replace this option.text = data[i].styleName;

let keys=Object.keys(data[i])

    with option.text = data[i][keys[0]].styleName我的问题是我需要从一个数组（tFields）中读取表中的名称和列数，以及从第二个数组（tRecords）中读取元素数据。

我已经实现了列的读取和创建，请大家帮忙或者告诉我创建列表的问题出在哪里。

这是代码：

function buildColumns() {

var rc = vConnection.recCount

var fc = vConnection.fldCount

for(var i = 0; i < fc; ++i)

{

    var str = 'import QtQuick 2.1; import QtQuick.Controls 1.0; import QtQuick.Layouts 1.0; TableViewColumn{ id: idColumn; role: '

    str += '"' + vConnection.tFields[i] + '"' + '; title: ' + '"' + vConnection.tFields[i] + '"' +  '; width: ' + (tblPage.width / vConnection.fldCount) +'; Component.onCompleted: console.log("YEY");}'

    tbl.addColumn(Qt.createQmlObject(str, tbl))

}

for(var j = 0; j < rc; ++j)

{

    var str2 = 'import QtQuick 2.12; import QtQuick.Window 2.12; import QtQuick.Controls 2.4; import QtQuick.Controls.Imagine 2.3; import QtQuick.Templates 2.5; import QtQuick.Controls 1.4; ListElement { id: idColumn; '

    for(var f = 0; f < fc; ++f)

    {

        str2 += vConnection.tFields[f] + ': "' + vConnection.tRecords[f + rc] + '"; '

    }

    str2 += '}'

    Qt.createQmlObject(str2, lmTable)

}

}

Component.onCompleted: {

    buildColumns();

}

TableView {

id: tbl

anchors.fill: parent

model: ListModel {

    id: lmTable

}

}

}

Answer 1

不要过度使用字符串连接，因为处理起来可能会令人困惑，相反，您可以使用“组件”的 createObject 方法，该方法可以以更易读的方式分配属性。要将项目添加到模型中，不必使用 X，而是使用 append 方法，您可以在其中传递字典，使代码更具可读性。Page {&nbsp; &nbsp; id: tblPage&nbsp; &nbsp; title: qsTr("Table")&nbsp; &nbsp; Component{&nbsp; &nbsp; &nbsp; &nbsp; id: columnComponent&nbsp; &nbsp; &nbsp; &nbsp; TableViewColumn{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Component.onCompleted: console.log("YEY")&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; ListModel {&nbsp; &nbsp; &nbsp; &nbsp; id: lmTable&nbsp; &nbsp; }&nbsp; &nbsp; function buildColumns() {&nbsp; &nbsp; &nbsp; &nbsp; var rc = vConnection.recCount&nbsp; &nbsp; &nbsp; &nbsp; var fc = vConnection.fldCount&nbsp; &nbsp; &nbsp; &nbsp; for(var i = 0; i < fc; ++i){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var col = columnComponent.createObject(tbl, {"role": vConnection.tFields[i],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"title": vConnection.tFields[i],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;"width": (tblPage.width / vConnection.fldCount)})&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; tbl.addColumn(col)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; for(var j = 0; j < rc; ++j){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var d = {};&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for(var f = 0; f < fc; ++f){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; d[vConnection.tFields[f]] = vConnection.tRecords[f + rc]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lmTable.append(d)&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; TableView {&nbsp; &nbsp; &nbsp; &nbsp; id: tbl&nbsp; &nbsp; &nbsp; &nbsp; anchors.fill: parent&nbsp; &nbsp; &nbsp; &nbsp; model: lmTable&nbsp; &nbsp; }&nbsp; &nbsp; Component.onCompleted: buildColumns()}