qml 表格TableView 创建

1.自动生成表格，函数调用如下：

//自动生成表格
    function updateColumn(arrayData) {
        if(arrayData.length < 3){
            console.log("输入表格数据错误！");
            return;
        }

        var arrayTitle = arrayData[0]; //标题数组
        var arrayRoles = arrayData[1]; //role数组
        var arrayWidth = arrayData[2]; //宽度数组

        if(arrayData.length > 3) {
            var arrayTypes = arrayData[3]; //表格Item的类型
        }

        if(arrayTitle.length !== arrayWidth.length || arrayTitle.length > arrayRoles.length){
            console.log("输入表格数据未一一对应！");
            return;
        }

        var i,str,count = tableview.columnCount;
        var sum = 0;

        //求出长度累加和以便于按比例分配列宽
        for(i = 0; i < arrayWidth.length; i++){
            sum += arrayWidth[i];
        }

        //前缀
        var importText = 'import QtQuick 2.7;import QtQuick.Controls 1.4;';

        //创建TableViewColumn的代码
        var prefixText = importText + 'TableViewColumn {delegate: tableItemText; movable: false; width: Math.round(';
        var prefixInput = importText + 'TableViewColumn {delegate: tableItemInput; movable: false; width: Math.round(';

        //将现在的每列全部删除
        for(i = 0; i < count; i++){
            tableview.removeColumn(0);
        }

        //循环添加TableViewColumn
        for(i = 0; i < arrayTitle.length; i++){
            var info = arrayWidth[i] +");role:\"" + arrayRoles[i] + "\";title:\"" + arrayTitle[i] + "\"}";
            str = prefixText + info;

            if(arrayTypes) {
                for(var j in arrayTypes) {
                    if(i * 1 === j * 1 && arrayTypes[j] === "input") {
                        str = prefixInput + info;
                    }
                }
            }

            tableview.addColumn(Qt.createQmlObject(str,tableview,"dynamicSnippet1"));
        }
    }

2.涉及表格样式

    Component {
        id: tableItemText
        Rectangle {
            anchors.fill: parent;
            border.color: "#333"
            color: "#fff"

            Text {
                text: styleData.value ? styleData.value : "";
                width: parent.width * 0.8;
                height: parent.height
                anchors.centerIn: parent
                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter
                font.family: gg.getFontFamily();
                font.pointSize: 10;
                color: "#000";
            }
        }
    }

    Component {
        id: tableItemInput
        Rectangle {
             anchors.fill: parent;
            color:  "#fff"
            border.color: focus ? "#3399ff" : "#000";

            TextField {
                text: styleData.value ? styleData.value : "";
                verticalAlignment: Text.AlignVCenter;
                horizontalAlignment: Text.AlignHCenter;
                font.family: gg.getFontFamily();
                font.pointSize: 10;
                color: "#000";
                readOnly:isReadOnly
                Keys.onReturnPressed: {
                    focus = false;
                }
                background: Item {
                    anchors.fill: parent;
                }
                onEditingFinished: {
                    tableModel.setProperty(styleData.row, styleData.role, text);
                }
            }
        }
    }