UniApp Praktische Entwicklung einer Tabellenkomponente für komplexe Szenarien

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!

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

  Sonstiges
  Interne Implementierung der Sortierung
  Interne Implementierung des Paging
  Interne Berechnung der Gesamtzeilen

• • 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

Wie kann man sie eleganter verwalten und die Schwierigkeit beim Einstieg verringern? -> Konfigurationsdatei config.js und darin Standardwerte festlegen, die die Rolle der

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": "广州一区达成"}
		]
	},
    // ...
]

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

table-header.vue

titleColumn.vue

这里有个坑 ：

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

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

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

表格内容

这里先要处理下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 })
        }
    })
},

🎜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🎜🎜🎜🎜🎜titleColumn.vue🎜🎜🎜🎜🎜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 },
		],
	},
]

🎜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): 🎜🎜🎜🎜🎜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 })
        }
    })
},

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

先看看数据结构 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 },
		],
	},
]

树形的结构，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
    }, [])
},

最终得到的数据如下：

数据处理完可以渲染了，

需要嵌套两层遍历：

第一层 遍历 dataList 得到行

第二层 遍历 dataIndexs 得到列

最终完成渲染：

固定首列，固定表头

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

兼容性

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

限制

• 设置了position:sticky之后必现指定top  left  right  bottom其中任一，才会生效。不设置的话表现和相对定位相同。top 和 bottom 或者 left 和 right 同时设置的情况下，top 、 left的优先级高。

• 设定为 position:sticky 元素的任意父节点的 overflow 属性必须是visible，否则 不会生效 (都不能滚动还能咋办)。

其他

造个轮子不难，造个好用的轮子不易。

涉及一些布局上和css部分的东西在文章中不好表达，不细说了，有兴趣的可以拉代码看看。传送门

开发过程中也遇到过不少的问题，都是一路修修补补过来，前期没有构思好会导致后面的开发磕磕碰碰（刚开始模块、参数没有划分好，整个东西逻辑都比较乱，后面停下来从新思考调整了，有种豁然开朗的痛快）

搬砖去了~

原文地址：https://juejin.cn/post/7083401121486045198

作者：沐夕花开

推荐：《uniapp教程》

Das obige ist der detaillierte Inhalt vonUniApp Praktische Entwicklung einer Tabellenkomponente für komplexe Szenarien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!