一、TableView

TableView是Qt Quick为表格式呈现数据提供的组件。

TableView与ListView类似，相比之下多了滚动条、挑选、可调整尺寸的表头等特性，数据也是通过Model来提供，此篇使用的是内建Model。

二、TableView简单例子

定义TableViewColumn,描述表格的每一列，这是必须的，否则表格无法显示。

代码

重写main.qml

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Layouts 1.12Window {id: windowvisible: truewidth: 600height: 480title: qsTr("QML自定义组件")TableView {id: phoneTableanchors.fill: parentTableViewColumn {role: "name"title: "Name"width: 100elideMode: Text.ElideRight}TableViewColumn {role: "cost"title: "Cose"width: 100}TableViewColumn {role: "manufacturer"title: "Manufacturer"width: 140}model: ListModel {id: phoneModelListElement {name: "iphone 5"cost: "4900"manufacturer: "Apple"}ListElement {name: "iphone 8"cost: "4900"manufacturer: "Apple"}ListElement {name: "iphone 6"cost: "4900"manufacturer: "Apple"}ListElement {name: "iphone 7"cost: "4900"manufacturer: "Apple"}}focus: true}
}

编译结果：

显示出来效果和ListView差不多，但增加了头，而且有默认的样式，如果不喜欢还可以定制表格样式。

三、动态增删改查 TabelView

有时你可能会想给 TableView 添加一列（一个字段），这时可以使用addColumn()方法，其参数是 TableViewColumn，指向一个 TableViewColumn 实例，你可以动态创建这个实例。

对于前两节的示例，第三列可以这样添加进去：

Component.onCompleted: {var col = Qt.createQmlObject("import QtQuick 2.2\nimport QtQuick.Controls 		 1.2\nTableViewColumn{ role: \"mamifacturer\"; title: \"Manufacturer\"; width: 140; }", phoneModel);phoneTable.addColumn( col );
}

要想在指定位置添加一列，可以使用insertColumn(index, column)方法，index 参数指定列的索引，column 参数与 addColumn() 的参数一样。

如果你想删除某列，可以使用removeColumn(index)方法，指定列索引即可。

TableView 还提供了moveColumn(from, to)，用于将一列从位置 from 移动到 to。

而如果你想给 TableView 动态添加数据，则可以通过调用 ListModel 的 append() 或 insert() 方法实现。删除数据通过 ListModel 的 clear() 或 remove() 方法实现。这些在前面介绍 ListView 的时候都已经介绍过了。

对于自定义的 Model，比如在 C++ 中实现的，则需要提供增、删、改数据的接口。

如有侵权，请及时联系博主删除，VX：18750903063