QML原生自带的表格控件--TableView。
原生态的样式上有点不太美观,可以尝试去修改下样式。
TableView { id: configDataTable focus: true anchors.fill: parent TableViewColumn{ role: "addr" ; title: "通讯地址";width:225 } TableViewColumn{ role: "name" ; title: "设备名称";width:240 } TableViewColumn{ role: "symbol" ; title: "备注标签";width: 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.width: 1//#D0E7FF border.color: "#17000000" } // 设置表头的样式 headerDelegate: Rectangle { implicitWidth: 10 implicitHeight: 32 border.width: 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