Qml之自定义表格

QML原生自带的表格控件--TableView。

 

原生态的样式上有点不太美观，可以尝试去修改下样式。

TableView {
        id: configDataTable
        focus: true
        anchors.fill: parent
 
 
        TableViewColumn{ role: "addr"  ; title: "通讯地址";225  }
        TableViewColumn{ role: "name" ; title: "设备名称";240  }
        TableViewColumn{ role: "symbol" ; title: "备注标签"; 240 }
 
        ScrollBar.vertical: ScrollBar {
            id: scroll_vertical
            anchors.right: parent.right
            anchors.rightMargin: 0
            contentItem: Rectangle {
                visible: (scroll_vertical.size < 1.0)
                //implicitWidth: configDataTable.scrollBarWidth
                //color: configDataTable.scrollBarColor
            }
        }
 
        ScrollBar.horizontal: ScrollBar {
            id: scroll_horizontal
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.left: parent.left
            anchors.leftMargin: -configDataTable.tableLeft
 
            contentItem: Rectangle {
                visible: (scroll_horizontal.size < 1.0)
                //implicitHeight: configDataTable.scrollBarWidth
                //color: configDataTable.scrollBarColor
            }
        }
 
 
        // 设置行的背景色
        rowDelegate: Rectangle {
            height: 32
            color: styleData.selected ? "#FF228FFF": "white"
            border. 1//#D0E7FF
            border.color: "#17000000"
        }
 
        // 设置表头的样式
        headerDelegate: Rectangle {
            implicitWidth: 10
            implicitHeight: 32
            border. 1
            border.color: "#17000000"
            color: "#ECF1F5"
            Text {
                anchors.left: parent.left
                anchors.leftMargin: 4
                anchors.verticalCenter: parent.verticalCenter
                text: styleData.value
                color:"#73000000"
            }
        }
 
        model: ListModel {
            id: configDataModel
            ListElement{
                addr: "1212";
                name: "付水电费第三方";
                symbol: "付水电费第三方"
            }
            ListElement{
                addr: "1212";
                name: "付水电费第三方";
                symbol: "付水电费第三方付水电费第三方"
            }
            ListElement{
                addr: "1212";
                name: "付水电费第三方付水电费第三方";
                symbol: "付水电费第三方"
            }  ListElement{
                addr: "1212";
                name: "付水电费第三方";
                symbol: "付水电费第三方"
            }
            ListElement{
                addr: "1212";
                name: "付水电费第三方";
                symbol: "付水电费第三方付水电费第三方"
            }  ListElement{
                addr: "1212";
                name: "付水电费第三方";
                symbol: "付水电费第三方"
            }
        }
    }//TableView
}// Rectangle