UniApp Praktische Entwicklung einer Tabellenkomponente für komplexe Szenarien-uni-app-php.cn

Dieser Artikel stellt Ihnen eine UniAppEine praktische Implementierung einer Tabellenkomponente (UniApp) in einem komplexen Szenario vor. Ich hoffe, dass es für alle hilfreich sein wird!

UniApp Praktische Entwicklung einer Tabellenkomponente für komplexe Szenarien

Da Sie nun ein ausgereifter Programmierer sind, müssen Sie wissen, wie Sie Ihr eigenes Rad bauen (ich habe den Plug-In-Markt von uniApp durchsucht und keine Plug-Ins gefunden, die den Anforderungen entsprechen, daher bleibt mir nichts anderes übrig selbst ein Rad zu bauen). Dieser Artikel dient der Überprüfung und Aufzeichnung.
Nutzungsszenarien: uniApp, mobiles Endgerät (kompatibel mit Miniprogrammen, Apps, H5)

Die spezifischen Funktionen sind nach Bedarf organisiert:

Erforderliche Organisation

Tabellenname
- Konfigurierbarer Hintergrund
- Schriftstil kann geändert werden (Größe, Farbe)
- Menüschaltfläche (muss externen Ereignissen ausgesetzt sein)
Kopfzeile
- Unterstützt mehrstufige Kopfzeilen
- Kopfzeile korrigiert
- Die Kopfzeile unterstützt benutzerdefinierte Namen.
Tabelle Der Inhalt unterstützt Bilder und Links
- Einige Gedanken zur gesamten Komponente
- Die Funktionen sind Relativ komplex und in eine Datei gequetscht. Die Datei ist nicht sehr elegant und wird chaotisch sein. -> Teilen Sie sie entsprechend der allgemeinen Richtung in mehrere Module auf (verfeinerte Granularität).
- Es gibt viele Anforderungen und intuitiv sind viele Parameter erforderlich zu bestehen -> Gemäß der Moduldefinition sind die Parameter auch klassifiziert

config.js

Feldbeschreibung

und der Standardstatusverwaltung

spielen, was die Verwendung einiger beinhaltet Symbole -> ; Ausgewählte iconfont Symbolbibliothek
Technische Implementierungsschwierigkeiten
Aufgrund von Einschränkungen der Nutzungsumgebung: uniApp implementiert Tabellenbezogene Komponenten sind relativ einfach, unterliegen jedoch relativ großen Einschränkungen in Nicht-H5-Umgebungen (z. B. können rowspan, colspan nicht festgelegt werden), was ebenfalls problematisch ist zu verwenden und kann die Anforderungen des Projekts nicht erfüllen. Schließlich habe ich beschlossen, mein eigenes Rad zu bauen.
config.js并在其中设定默认值，起到字段说明及默认状态管理的作用
其中会涉及一些图标的使用 -> 选定iconfont图标库

技术实现难点

由于使用环境限制：uniApp实现的表格相关组件比较简单，对于非H5环境限制比较大（例如不能设置rowspan，colspan），使用起来也显得比较麻烦，达不到项目的需求，最后决定自己造个轮子。

表头部分

主要难点在于 多级表头的处理，怎么样做到根据数据来驱动显示。刚开始是打算按 html table 的方式实现，开发过程中遇到的问题比较多，首先数据处理比较麻烦，要计算有多少行、每行单元格的colspan、rowspan。而且没有td, tr等组件，需要自己额外实现。

columns的数据是树形的，如下

columns = [
    { "title": "区域", "dataIndex": "区域" },
	{
		"title": "广州一区",
		"children": [
			{ "title": "销售", "dataIndex": "广州一区销售"},
			{ "title": "计划销售", "dataIndex": "广州一区计划销售" },
			{ "title": "达成", "dataIndex": "广州一区达成"}
		]
	},
    // ...
]

Nach dem Login kopieren

似乎用 flex 布局就能实现了
每个格子设置垂直居中，如果存在children则遍历递归渲染，由于需要递归调用渲染，把递归的部分在分出来一个组件：titleColumn 。先贴个代码（代码已发布到社区，有兴趣可以去看看传送门）：

table-header.vue

UniApp Praktische Entwicklung einer Tabellenkomponente für komplexe Szenarien

titleColumn.vue

UniApp Praktische Entwicklung einer Tabellenkomponente für komplexe Szenarien

这里有个坑 ：

在正常的vue中递归组件是不需要引入的，在 uniApp则需要。

// titleColumn.vue
import titleColumn from "./title-column.vue"

Nach dem Login kopieren

样式方面不展开了，不好写。直接看看效果(自我感觉很好，哈哈哈)：

UniApp Praktische Entwicklung einer Tabellenkomponente für komplexe Szenarien

表格内容

这里先要处理下columns的数据（要考虑到多级表头情况），根据上面的columns，得到实际要渲染的列：

新建一个变量dataIndexs,用于保存需要实际渲染的列数据
递归处理columns
Kopfzeilenteil

Die Hauptschwierigkeit liegt in der Verarbeitung von

mehrstufigen Kopfzeilen🎜 und wie man die Anzeige datenbasiert steuert. Zu Beginn hatten wir geplant, es in Form einer html-Tabelle zu implementieren. Während des Entwicklungsprozesses stießen wir auf viele Probleme. Zunächst mussten wir berechnen, wie viele Zeilen es gab und der colspan< der Zellen in jeder Zeile /code>, <code>rowspan. Und es gibt keine td, tr und andere Komponenten, Sie müssen sie also selbst implementieren. 🎜🎜Die Daten von Spalten liegen in Baumform vor, wie unten gezeigt🎜

// 根据Column 获取body中实际渲染的列
fmtColumns(list) {
    // 保存叶子节点
    this.dataIndexs = []
    if (!list || !list.length) return
    // 获取实际行
    this.columnsDeal(list)
},

// 
columnsDeal(list, level = 0) {
    list.forEach(item => {
        let { children, ...res } = item
        if (children && children.length) {
            this.columnsDeal(children, level + 1)
        } else {
            this.dataIndexs.push({ ...res })
        }
    })
},

Nach dem Login kopieren

🎜Es scheint, dass dies mit dem flex-Layout erreicht werden kann. 🎜Jedes Raster ist so eingestellt, dass es vertikal zentriert ist , wenn es kinder gibt, dann wird das 🎜rekursive Rendering🎜 durchlaufen. Da das Rendering rekursiv aufgerufen werden muss, wird der rekursive Teil in eine Komponente unterteilt: titleColumn. Veröffentlichen Sie zuerst den Code (der Code wurde für die Community freigegeben. Wenn Sie interessiert sind, können Sie ihn sich ansehen Portal 🎜): 🎜🎜table-header.vue🎜🎜🎜 UniApp Praktische Entwicklung einer Tabellenkomponente für komplexe Szenarien

🎜🎜titleColumn.vue🎜🎜 UniApp Praktische Entwicklung einer Tabellenkomponente für komplexe Szenarien

🎜🎜🎜Hier ist eine Grube🎜: 🎜🎜Im normalen vue Rekursive Komponenten müssen nicht eingeführt werden. Ja, es ist in uniApp erforderlich. 🎜

tableData = [
    {
		"key": 1,
		"区域": "广州",
		"销售": 100,
		"计划销售": 200,
		"达成": "50.0%",
		"达成排名": 1,
		"GroupIndex": 1,
		"GroupLayer": 1,
		"GroupKey": "广州",
		"children": [{
				"key": 11,
				"区域": "广州一区",
				"小区": "广州一区",
				"销售": 60,
				"计划销售": 120,
				"达成": "50.0%",
				"达成排名": 1,
				children: [{
					"key": 111,
					"区域": "广州一区1",
					"小区": "广州一区1",
					"销售": 60,
					"计划销售": 120,
					"达成": "50.0%",
					"达成排名": 1,
				}]
			},
			{ "key": 12, "区域": "广州二区", "小区": "广州二区", "销售": 40, "计划销售": 80, "达成": "50.0%", "达成排名": 1 },
		],
	},
]

Nach dem Login kopieren

🎜Der Stil ist nicht erweitert und es ist schwierig zu schreiben. Schauen Sie sich die Wirkung direkt an (ich fühle mich sehr gut, hahaha): 🎜🎜 UniApp Praktische Entwicklung einer Tabellenkomponente für komplexe Szenarien

🎜🎜🎜Tabelleninhalt🎜🎜🎜Hier müssen wir uns mit

Spalten</ befassen Code> erste Daten (mehrstufige Header müssen berücksichtigt werden) Rufen Sie gemäß den oben genannten <code>Spalten

die tatsächlich zu rendernden Spalten ab: 🎜🎜🎜🎜Erstellen Sie eine neue Variable

dataIndexs< /code> zum Speichern der Spaltendaten, die tatsächlich gerendert werden müssen 🎜🎜🎜🎜 verarbeitet <code>Spalten

rekursiv, um den endgültigen Blattknoten zu erhalten, und speichert ihn. 🎜🎜🎜🎜Schlüsselcode: 🎜

// 根据Column 获取body中实际渲染的列
fmtColumns(list) {
    // 保存叶子节点
    this.dataIndexs = []
    if (!list || !list.length) return
    // 获取实际行
    this.columnsDeal(list)
},

// 
columnsDeal(list, level = 0) {
    list.forEach(item => {
        let { children, ...res } = item
        if (children && children.length) {
            this.columnsDeal(children, level + 1)
        } else {
            this.dataIndexs.push({ ...res })
        }
    })
},

Nach dem Login kopieren

接下来就是处理列表数据中的树形结构了。

先看看数据结构 tableData:

tableData = [
    {
		"key": 1,
		"区域": "广州",
		"销售": 100,
		"计划销售": 200,
		"达成": "50.0%",
		"达成排名": 1,
		"GroupIndex": 1,
		"GroupLayer": 1,
		"GroupKey": "广州",
		"children": [{
				"key": 11,
				"区域": "广州一区",
				"小区": "广州一区",
				"销售": 60,
				"计划销售": 120,
				"达成": "50.0%",
				"达成排名": 1,
				children: [{
					"key": 111,
					"区域": "广州一区1",
					"小区": "广州一区1",
					"销售": 60,
					"计划销售": 120,
					"达成": "50.0%",
					"达成排名": 1,
				}]
			},
			{ "key": 12, "区域": "广州二区", "小区": "广州二区", "销售": 40, "计划销售": 80, "达成": "50.0%", "达成排名": 1 },
		],
	},
]

Nach dem Login kopieren

树形的结构，key是唯一值。

有想过使用递归组件的方式实现，但是考虑到会涉及到展开、收起的操作。也是比较麻烦。

最终的方案是把数据扁平化处理，为每条数据添加层级、是否子数据、父级ID 等属性。并通过一个数组变量来记录展开的行，并以此控制子数据的显示与否。处理后的数据存放在 dataList中

扁平化处理函数：

// 递归处理数据，tree => Array
listFmt(list, level, parentIds = []) {
    return list.reduce((ls, item) => {
        let { children, ...res } = item
        // 错误提示
        if (res[this.idKey] === undefined || !res[this.idKey] === null) {
            // console.error(`tableData 数据中存在 [idKey] 属性不存在数据，请检查`)
        }
        let nowItem = {
            ...res,
            level,
            hasChildren: children && children.length,
            parentIds,
            children,
            [this.idKey]: res[this.idKey] && res[this.idKey].toString()
        }
        ls.push(nowItem)
        if (children && children.length) {
            this.isTree = true
            ls = ls.concat(this.listFmt(children, level + 1, [...parentIds, nowItem[this.idKey]]))
        }
        return ls
    }, [])
},

Nach dem Login kopieren

最终得到的数据如下：

UniApp Praktische Entwicklung einer Tabellenkomponente für komplexe Szenarien

数据处理完可以渲染了，

需要嵌套两层遍历：

第一层遍历 dataList 得到行

第二层遍历 dataIndexs 得到列

最终完成渲染：

UniApp Praktische Entwicklung einer Tabellenkomponente für komplexe Szenarien

固定首列，固定表头

使用css属性：position: sticky实现。粘性定位元素（stickily positioned element）。大家都是成熟的前端程序猿啦~~，就不具体介绍了。说说一些需要注意的细节：

兼容性

UniApp Praktische Entwicklung einer Tabellenkomponente für komplexe Szenarien

uniapp中小程序模式、App模式是支持的！！！

限制

设置了position:sticky之后必现指定top left right bottom其中任一，才会生效。不设置的话表现和相对定位相同。top 和 bottom 或者 left 和 right 同时设置的情况下，top 、 left的优先级高。
设定为 position:sticky 元素的任意父节点的 overflow 属性必须是visible，否则不会生效 (都不能滚动还能咋办)。