UniApp Développement pratique d'un composant de table pour des scénarios complexes

Cet article partagera avec vous une UniAppUne implémentation pratique d'un composant table (UniApp) dans un scénario complexe. J'espère qu'il sera utile à tout le monde !

Maintenant que vous êtes un programmeur mature, vous devez savoir comment construire votre propre roue (j'ai cherché sur le marché des plug-ins d'uniApp et n'ai trouvé aucun plug-in répondant aux besoins, je n'ai donc pas d'autre choix que construire une roue moi-même). Cet article a pour but de réviser + enregistrer.
Scénarios d'utilisation : uniApp, terminal mobile (compatible mini programmes, Apps, H5)

Les fonctions spécifiques sont organisées selon les besoins :

Organisation requise

• Nom de la table

  • Fond configurable

  • Le style de police peut être modifié (taille, couleur)

  • Bouton Menu (doit être exposé aux événements externes)

• En-tête

  • Prend en charge les en-têtes à plusieurs niveaux

  • En-tête corrigé La ligne d'en-tête prend en charge les noms personnalisés.

    le contenu prend en charge les images et les liens

  Autres

• Implémentation interne du tri

  • Implémentation interne de la pagination

  • Calcul interne du total des lignes

  • Quelques réflexions sur l'ensemble du composant

• Les fonctions sont relativement complexes et regroupés en un seul Le fichier n'est pas très élégant et sera compliqué -> Divisez-le en plusieurs modules selon la direction générale (affiner la granularité)
  • Il y a beaucoup d'exigences, et intuitivement il y a beaucoup de paramètres qui doivent être passés -> Selon la définition du module, les paramètres sont également classés

  • Il existe de nombreux paramètres Comment les gérer plus élégamment et réduire la difficulté de démarrage ? -> Fichier de configuration config.js et y définir les valeurs par défaut, qui joue le rôle de

    description du champ

    et de
  gestion de l'état par défaut

  ce qui impliquera l'utilisation de certains Icons -> ; Bibliothèque d'icônes iconfont sélectionnée

Difficultés techniques de mise en œuvre

En raison des restrictions de l'environnement d'utilisation : uniApp Les composants liés aux tables implémentés sont relativement simples, mais ont des restrictions relativement importantes sur les environnements non-H5 (par exemple, rowspan, colspan ne peuvent pas être définis), ce qui est également gênant à utiliser et ne peut pas répondre aux besoins du projet. J'ai finalement décidé de construire ma propre roue.

• Partie en-tête

• La principale difficulté réside dans le traitement des

  en-têtes multi-niveaux
et comment piloter l'affichage en fonction des données. Au début, nous avions prévu de l'implémenter sous la forme d'un tableau HTML. Nous avons rencontré de nombreux problèmes lors du processus de développement. Tout d'abord, le traitement des données était problématique. Nous devions calculer le nombre de lignes. et le colspan, <code>rowspan. Et il n'y a pas de td, tr ni d'autres composants, vous devez donc les implémenter vous-même.

• Les données des colonnes sont sous forme d'arbre, comme indiqué ci-dessousconfig.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

  // 根据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 })
          }
      })
  },

  Il semble que cela puisse être réalisé en utilisant la disposition flex
Chaque grille est définie pour être centrée verticalement , s'il y a des enfants alors traverse le

rendu récursif

Puisque le rendu doit être appelé de manière récursive, la partie récursive est séparée en un composant : titleColumn. Postez d'abord le code (le code a été diffusé à la communauté, si vous êtes intéressé, vous pouvez le consulter Portail

) : 🎜🎜table-header.vue🎜🎜🎜🎜🎜titleColumn.vue🎜🎜🎜🎜🎜Il y a une fosse ici🎜 : 🎜🎜En vue normale, les composants récursifs n'ont pas besoin d'être introduits Oui, cela est requis dans uniApp. 🎜

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 },
		],
	},
]

🎜Le style n'est pas élargi et il est difficile à écrire. Jetez un œil directement à l'effet (je me sens très bien, hahaha) : 🎜🎜🎜🎜🎜Contenu du tableau🎜🎜🎜Ici, nous devons nous occuper des colonnes code> d'abord Données (les en-têtes multi-niveaux doivent être pris en compte), selon les <code>colonnes ci-dessus, obtenez les colonnes réelles à restituer : 🎜🎜🎜🎜Créez une nouvelle variable dataIndexs pour l'enregistrement Les données de colonne qui doivent être réellement rendues 🎜🎜🎜🎜 traitent récursivement les <code>colonnes pour obtenir le nœud feuille final et l'enregistre. 🎜🎜🎜🎜Code clé : 🎜

// 根据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教程》

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!