Pembangunan Praktikal UniApp Komponen Jadual untuk Senario Kompleks

Artikel ini akan berkongsi dengan anda UniApp pelaksanaan praktikal komponen jadual (UniApp) dalam senario yang kompleks. Saya harap ia akan membantu semua orang.

Dia seorang pengaturcara yang matang dan perlu tahu cara mencipta semula rodanya sendiri (saya mencari pasaran pemalam uniApp dan tidak menemui pemalam yang memenuhi keperluan saya. Tidak ada cara lain, anda hanya boleh membina roda sendiri). Artikel ini bertujuan untuk menyemak rekod.
Senario penggunaan: uniApp, terminal mudah alih (serasi dengan program mini, Apl, H5)

Atur fungsi tertentu mengikut keperluan:

Atur keperluan

• Nama jadual

  • Latar belakang boleh dikonfigurasikan

  • Gaya fon boleh diubah suai (saiz, warna)

  • Butang menu (memerlukan acara pendedahan luaran)

• Pengepala

  • Sokong pengepala berbilang peringkat

  • Pengepala tetap

  • Baris pengepala menyokong nama tersuai

• Jadual

  • Menyokong tetapan lebar sel

  • Lajur pertama tetap

  • Sokongan data pokok

  • Kandungan menyokong gambar dan pautan

• Lain-lain

  • Pelaksanaan dalaman pengisihan

  • Pelaksanaan dalaman halaman

  • Pengiraan dalaman jumlah baris

Terdapat banyak keperluan, dan secara intuitif terdapat banyak parameter yang perlu dilalui -> , parameter juga dikelaskan

• Terdapat banyak parameter Bagaimana untuk menguruskannya dengan lebih elegan dan mengurangkan kesukaran untuk bermula? -> Fail konfigurasi

  dan tetapkan nilai lalai di dalamnya, yang memainkan peranan
penerangan medan
• dan

  pengurusan status lalai

• config.js Ia akan melibatkan penggunaan beberapa ikon -> pustaka ikon Terpilih

Kesukaran pelaksanaan teknikal

• iconfontDisebabkan persekitaran penggunaan sekatan:

  Komponen berkaitan jadual yang dilaksanakan agak mudah, tetapi mempunyai sekatan yang agak besar pada persekitaran bukan H5 (contohnya,
,
ia juga menyusahkan untuk digunakan dan tidak boleh dipenuhi). keperluan projek Akhirnya, saya memutuskan untuk membina roda sendiri.
Bahagian pengepala

uniApprowspancolspanKesukaran utama terletak pada pemprosesan

pengepala berbilang peringkat

, bagaimana untuk melakukannya berdasarkan pada paparan Pemandu data. Pada mulanya, kami merancang untuk melaksanakannya dengan cara Kami menghadapi banyak masalah semasa proses pembangunan Pertama sekali, pemprosesan data menyusahkan > sel dalam setiap baris. Dan tiada komponen seperti , jadi anda perlu melaksanakannya sendiri. Data

adalah dalam bentuk pokok, seperti yang ditunjukkan di bawah

Nampaknya ia boleh dicapai menggunakan html table reka letakcolspanSetiap grid ditetapkan kepada berpusat secara menegak, jika terdapat rowspan Kemudian rentasi td, tr dan buat secara rekursif

Memandangkan pemaparan perlu dipanggil secara rekursif, bahagian rekursif dipisahkan kepada komponen:

. Siarkan kod dahulu (kod telah dikeluarkan kepada komuniti, jika anda berminat, anda boleh menyemak columnsPortal

):

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

flex
children titleColumn

table-header.vue


Terdapat perangkap di sini:

Secara biasa titleColumn.vue komponen rekursif bukan Apa yang perlu diperkenalkan diperlukan dalam

.



Gaya tidak dikembangkan dan sukar untuk ditulis. Tengok kesannya terus (saya rasa sangat baik, hahaha):

vueuniAppKandungan jadual

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

Di sini Mula-mula, kita perlu memproses data

(situasi pengepala berbilang peringkat mesti diambil kira Menurut di atas, kita boleh mendapatkan lajur sebenar untuk diberikan:

Buat pembolehubah baharu, digunakan untuk menyimpan data lajur yang perlu benar-benar dipaparkan

Pemprosesan rekursifcolumnsDapatkan nod daun akhir dan simpan la. columns

• Kod kunci:

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

Atas ialah kandungan terperinci Pembangunan Praktikal UniApp Komponen Jadual untuk Senario Kompleks. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!