摘要：
tstyle.backgroundColor:tstyle。alternateBackgroundColor）；}//设置单元格项委托：文本｛Text:styleData.value；font.pointSize:13；verticalAlignment:Text.AligngVCenter；horizontalAlignment:Text.AligngRight；｝｝TableViewColumn｛role:“code”；title:qsTr；120；可移动：false；｝TableViewColumn｛role:“name”；title:qsTr；120；可移动：false；｝ListModel｛id:libraryModelListElement｝代码：“159922”名称：“500ETF”｝ListElement｛代码：”600030“名称：”中信证券“｝List元素｛代码“300244”名称：”Dean Diagnostics“｝模型：libraryModel；｝3.访问和修改模型访问数据项委托：文本｛Text:styleData.value；font.pointSize:13；verticalAlignment:Text.AligngVCenter；horizontalAlignment:Text.AligngRight；MouseArea｛anchors.fill:parent；on单击：｛console.log；console.log；｝｝删除datarowDelegate:矩形｛height:30；color:styleData.selected？
本博只是简单的展示TableView的基本使用（TableView、style:TableViewStyle、headerDelegate、rowDelegate、itemDelegate、TableViewColumn、ListModel及访问和修改Model），关于更多属性和方法的使用可以参考TableView QML Type
1. 效果图 
import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Controls 1.4 import QtQuick.Controls.Styles 1.4 Window { visible: true 300 height: 480 title: qsTr("Hello World") TableView { id:stockTable; anchors.left: parent.left; anchors.top:parent.top; anchors.topMargin: 10; anchors.right: parent.right; anchors.bottom: parent.bottom; //alternatingRowColors : true; style:TableViewStyle { id:tstyle; backgroundColor:"white"; alternateBackgroundColor:"#f6F6F6"; textColor:"black"; // 设置TableView的头部 headerDelegate: Canvas { implicitWidth:100; implicitHeight:32; onPaint: { var ctx = getContext("2d"); ctx.lineWidth = 2; ctx.strokeStyle="red"; ctx.fillStyle="blue"; ctx.beginPath(); console.log("",width,"--","height:",height); ctx.rect(0,0,width,height); ctx.stroke(); ctx.font="14pt sans-serif"; ctx.textAlign="right" ctx.textBaseLine="middle"; ctx.fillText(styleData.value,width-2,height/2+10); } } // 设置行 rowDelegate:Rectangle { height:30; color: styleData.selected? "red": (styleData.alternate ? tstyle.backgroundColor : tstyle.alternateBackgroundColor); } // 设置单元格 itemDelegate: Text { text:styleData.value; font.pointSize:13; verticalAlignment:Text.AlignVCenter; horizontalAlignment:Text.AlignRight; } } TableViewColumn { role:"code"; title:qsTr("Code"); 120; movable: false; } TableViewColumn { role:"name"; title:qsTr("Name"); 120; movable: false; } ListModel { id: libraryModel ListElement { code: "159922" name: "500ETF" } ListElement { code: "600030" name: "中信证券" } ListElement { code: "300244" name: "迪安诊断" } } model: libraryModel; } }
(1) 访问数据
itemDelegate: Text { text:styleData.value; font.pointSize:13; verticalAlignment:Text.AlignVCenter; horizontalAlignment:Text.AlignRight; MouseArea { anchors.fill:parent; onClicked: { console.log("currentRow:",styleData.row, "-", styleData.column); console.log(libraryModel.get(styleData.row).code, "-", libraryModel.get(styleData.row).name); } } }
（2）删除数据
rowDelegate:Rectangle { height:30; color: styleData.selected? "red": (styleData.alternate ? tstyle.backgroundColor : tstyle.alternateBackgroundColor); MouseArea { anchors.fill:parent; onClicked: { libraryModel.remove(styleData.row); } } }
（3）修改数据
itemDelegate: Text { text:styleData.value; font.pointSize:13; verticalAlignment:Text.AlignVCenter; horizontalAlignment:Text.AlignRight; MouseArea { anchors.fill:parent; onClicked: { console.log("currentRow:",styleData.row, "-", styleData.column); console.log(libraryModel.get(styleData.row).code, "-", libraryModel.get(styleData.row).name); libraryModel.set(styleData.row, {"code":"888888", "name":"modify"}); } } }
（4）添加数据
rowDelegate:Rectangle { height:30; color: styleData.selected? "red": (styleData.alternate ? tstyle.backgroundColor : tstyle.alternateBackgroundColor); MouseArea { anchors.fill:parent; onClicked: { //libraryModel.remove(styleData.row); libraryModel.append({"code":"666666", "name":"add"}); } } }