복잡한 시나리오를 위한 테이블 구성요소의 UniApp 실무 개발

이 기사에서는 UniApp복잡한 시나리오에서 테이블 구성 요소(UniApp)를 실제로 구현하는 방법이 모든 사람에게 도움이 되기를 바랍니다.

이제 성숙한 프로그래머가 되었으니 나만의 휠을 만드는 법을 알아야 합니다. 하지만 직접 바퀴를 만드는 것입니다). 이번 글은 리뷰 + 기록을 목적으로 합니다.
사용 시나리오: uniApp, 모바일 단말기(미니 프로그램, Apps, H5와 호환 가능)

특정 기능은 필요에 따라 구성됩니다.

필수 구성

• 테이블 이름

  • 구성 가능한 배경

  • 글꼴 스타일 수정 가능(크기, 색상)

  • 메뉴 버튼(외부 이벤트에 노출 필요)

• Header

  • 다단계 헤더 지원

  • Header 고정

  • 머리글 행은 사용자 정의 이름을 지원합니다

• table

  • 셀 너비 설정을 지원

  • 첫 번째 열 고정

  • 트리 데이터 지원

  • 콘텐츠는 이미지와 링크를 지원합니다

• Others

  • 정렬의 내부 구현

  • 페이징의 내부 구현

  • 총 행의 내부 계산

전체 구성 요소에 대한 몇 가지 생각

• 기능 상대적으로 복잡하고 하나로 압축됩니다. 파일이 그다지 우아하지 않고 지저분해질 것입니다. -> 일반적인 방향에 따라 여러 모듈로 나눕니다(세분성 조정)

• 요구사항도 많고, 직관적으로 매개변수도 많습니다. -> 모듈 정의에 따라 매개변수도 분류됩니다

• 매개변수를 더 우아하게 관리하고 시작의 어려움을 줄이는 방법은 무엇인가요? -> config.js 구성 파일에 ​​기본값을 설정합니다. 이는 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필드 설명

  및
기본 상태 관리

🎜🎜 역할을 합니다. 아이콘 -> ; 선택된 iconfont 아이콘 라이브러리🎜🎜🎜

🎜기술적 구현 어려움🎜🎜🎜사용 환경 제한으로 인해: uniApp</code > 구현된 Table 관련 구성요소는 상대적으로 단순하지만 H5가 아닌 환경에서는 상대적으로 큰 제한이 있어(예: <code>rowspan, colspan 설정 불가)) 이 역시 번거롭습니다. 사용하고 프로젝트의 요구 사항을 충족할 수 없습니다. 마침내 내 자신의 휠을 만들기로 결정했습니다. 🎜🎜🎜헤더 부분🎜🎜🎜가장 어려운 점은 🎜다단계 헤더🎜를 처리하고 데이터를 기반으로 디스플레이를 구동하는 방법입니다. 처음에는 html 테이블 방식으로 구현하려고 했는데, 우선 데이터 처리 과정에서 많은 문제가 발생했습니다. 각 행에 있는 셀의 colspan<, <code>rowspan. 그리고 td, tr 및 기타 구성요소가 없으므로 직접 구현해야 합니다. 🎜🎜아래와 같이 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 })
        }
    })
},

🎜flex 레이아웃을 사용하면 가능한 것 같습니다🎜각 그리드는 수직 중앙에 위치하도록 설정되어 있습니다 , 자식이 있는 경우 🎜재귀 렌더링🎜을 순회합니다. 렌더링은 재귀적으로 호출해야 하므로 재귀 부분은 titleColumn 구성 요소로 분리됩니다. 먼저 코드를 게시하세요. (코드는 커뮤니티에 공개되었습니다. 관심이 있으시면 포털 🎜): 🎜🎜table-header.vue🎜🎜🎜🎜🎜titleColumn.vue🎜🎜🎜🎜🎜여기 구덩이가 있습니다🎜: 🎜🎜일반적인 vue에서는, 재귀 구성 요소를 도입할 필요가 없습니다. 예, 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 },
		],
	},
]

🎜문체가 전개가 안되어 쓰기가 어렵네요. 효과를 직접 확인해보세요(기분이 참 좋아요 ㅎㅎㅎ): 🎜🎜🎜🎜🎜테이블 콘텐츠🎜🎜🎜여기서는 열</을 처리해야 합니다. code> 첫 번째 데이터(다중 레벨 헤더를 고려해야 함) 위의 <code>열에 따라 렌더링할 실제 열을 가져옵니다. 🎜🎜🎜🎜새 변수 dataIndexs< 만들기 /code> 실제로 렌더링해야 하는 열 데이터 🎜🎜🎜🎜는 <code>column을 재귀적으로 처리하여 최종 리프 노드를 구하고 저장합니다. 🎜🎜🎜🎜키 코드: 🎜

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

위 내용은 복잡한 시나리오를 위한 테이블 구성요소의 UniApp 실무 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!