刘先森吖丶 2021-12-02 08:46 采纳率: 50%
浏览 80
已结题

Elementui表格的一列为数组,如何通过合并单元格分成两行显示该列

  1. data(){
  2. return{
  3. tableData:[
  4. {
  5. "betknz": "灰腾梁柳兰",
  6. "anlbez": "华锐SL70 28#",
  7. "anlknz": "131AF01028",
  8. "anlnum": null,
  9. "devCapacity": 300,
  10. "mmlsta": [
  11. -1,
  12. -1,
  13. -1,
  14. -1,
  15. -1,
  16. -1,
  17. -1,
  18. -1,
  19. -1,
  20. -1,
  21. -1,
  22. -1,
  23. -1,
  24. -1,
  25. -1
  26. ],
  27. "stoppageTime": [
  28. -1,
  29. -1,
  30. -1,
  31. -1,
  32. -1,
  33. -1,
  34. -1,
  35. -1,
  36. -1,
  37. -1,
  38. -1,
  39. -1,
  40. -1,
  41. -1,
  42. -1
  43. ],
  44. "mldtxtmas": [
  45. "",
  46. "",
  47. "",
  48. "",
  49. "",
  50. "",
  51. "",
  52. "",
  53. "",
  54. "",
  55. "",
  56. "",
  57. "",
  58. "",
  59. ""
  60. ],
  61. "ofname": [
  62. "WarFir006",
  63. "WarFir003",
  64. "WarFir007",
  65. "ErrFir006",
  66. "ErrFir003",
  67. "ErrFir002",
  68. "ErrFir004",
  69. "ErrFir001",
  70. "WarFir008",
  71. "WarFir008",
  72. "ErrFir001",
  73. "ErrFir004",
  74. "ErrFir002",
  75. "ErrFir003",
  76. "ErrFir006"
  77. ],
  78. "ofdes": [
  79. "塔基 UPS 断路器",
  80. "SS-10 超出工作位置",
  81. "电池放电接触器故障",
  82. "电网 1s 滤波功率大于设定值(1680KW)",
  83. "1min 总滤波电流大于设定值",
  84. "变桨 3 位置超差",
  85. "快速停机时,停机时间超过 30s 时,转速仍然超过 1000rpm",
  86. "塔基 PLC 通讯错误",
  87. "电池断电接触器分断超时",
  88. "电池断电接触器分断超时",
  89. "塔基 PLC 通讯错误",
  90. "快速停机时,停机时间超过 30s 时,转速仍然超过 1000rpm",
  91. "变桨 3 位置超差",
  92. "1min 总滤波电流大于设定值",
  93. "电网 1s 滤波功率大于设定值(1680KW)"
  94. ],
  95. "gzms": [
  96. "",
  97. "",
  98. "",
  99. "",
  100. "",
  101. "",
  102. "",
  103. "",
  104. "",
  105. "",
  106. "",
  107. "",
  108. "",
  109. "",
  110. ""
  111. ],
  112. "mmldtm": [
  113. "0001-01-01 00:00:00",
  114. "0001-01-01 00:00:00",
  115. "0001-01-01 00:00:00",
  116. "0001-01-01 00:00:00",
  117. "0001-01-01 00:00:00",
  118. "0001-01-01 00:00:00",
  119. "0001-01-01 00:00:00",
  120. "0001-01-01 00:00:00",
  121. "0001-01-01 00:00:00",
  122. "0001-01-01 00:00:00",
  123. "0001-01-01 00:00:00",
  124. "0001-01-01 00:00:00",
  125. "0001-01-01 00:00:00",
  126. "0001-01-01 00:00:00",
  127. "0001-01-01 00:00:00"
  128. ],
  129. "yjhfsj": [
  130. "0001-01-01 00:00:00",
  131. "0001-01-01 00:00:00",
  132. "0001-01-01 00:00:00",
  133. "0001-01-01 00:00:00",
  134. "0001-01-01 00:00:00",
  135. "0001-01-01 00:00:00",
  136. "0001-01-01 00:00:00",
  137. "0001-01-01 00:00:00",
  138. "0001-01-01 00:00:00",
  139. "0001-01-01 00:00:00",
  140. "0001-01-01 00:00:00",
  141. "0001-01-01 00:00:00",
  142. "0001-01-01 00:00:00",
  143. "0001-01-01 00:00:00",
  144. "0001-01-01 00:00:00"
  145. ],
  146. "ofdtm": [
  147. "2021-11-07 07:08:21",
  148. "2020-11-10 11:45:16",
  149. "2020-11-10 11:45:16",
  150. "2020-11-05 16:57:01",
  151. "2020-11-05 16:57:01",
  152. "2020-11-05 16:57:01",
  153. "2020-11-05 16:57:01",
  154. "2020-11-05 16:57:01",
  155. "2020-11-05 16:57:01",
  156. "2020-11-05 16:56:57",
  157. "2020-11-05 16:56:57",
  158. "2020-11-05 16:56:57",
  159. "2020-11-05 16:56:57",
  160. "2020-11-05 16:56:57",
  161. "2020-11-05 16:56:57"
  162. ],
  163. "ofhfsj": [
  164. "2022-12-08 07:15:41",
  165. null,
  166. null,
  167. null,
  168. null,
  169. null,
  170. null,
  171. null,
  172. null,
  173. null,
  174. null,
  175. null,
  176. null,
  177. null,
  178. null
  179. ],
  180. "ofTime": [
  181. 1670454486489,
  182. 9268,
  183. 9268,
  184. 9382,
  185. 9382,
  186. 9382,
  187. 9382,
  188. 9382,
  189. 9382,
  190. 9382,
  191. 9382,
  192. 9382,
  193. 9382,
  194. 9382,
  195. 9382
  196. ],
  197. "lastTourTime": null,
  198. "sbfzr": null,
  199. "xphbm": [
  200. "",
  201. "",
  202. "",
  203. "",
  204. "",
  205. "",
  206. "",
  207. "",
  208. "",
  209. "",
  210. "",
  211. "",
  212. "",
  213. "",
  214. ""
  215. ],
  216. "aufid": null,
  217. "selfnumber": [
  218. "",
  219. "",
  220. "",
  221. "",
  222. "",
  223. "",
  224. "",
  225. "",
  226. "",
  227. "",
  228. "",
  229. "",
  230. "",
  231. "",
  232. ""
  233. ],
  234. "mitknzmld": null,
  235. "mldtxtnot": null,
  236. "mitknzvwt": [
  237. "",
  238. "",
  239. "",
  240. "",
  241. "",
  242. "",
  243. "",
  244. "",
  245. "",
  246. "",
  247. "",
  248. "",
  249. "",
  250. "",
  251. ""
  252. ],
  253. "sycl": null,
  254. "sjlx": null,
  255. "betzustanl": null,
  256. "gzlx": null,
  257. "mmlenddtm": null,
  258. "stationCode": "F1001",
  259. "devId": "FJ028",
  260. "mmlstadesc": null,
  261. "frsselfnumber": [
  262. "",
  263. "",
  264. "",
  265. "",
  266. "",
  267. "",
  268. "",
  269. "",
  270. "",
  271. "",
  272. "",
  273. "",
  274. "",
  275. "",
  276. ""
  277. ],
  278. "businessType": null,
  279. "dataDate": null,
  280. "ttime": null,
  281. "yzhyy": [
  282. "",
  283. "",
  284. "",
  285. "",
  286. "",
  287. "",
  288. "",
  289. "",
  290. "",
  291. "",
  292. "",
  293. "",
  294. "",
  295. "",
  296. ""
  297. ],
  298. "aqxdm": [
  299. "163",
  300. "11",
  301. "154",
  302. "93",
  303. "86",
  304. "33",
  305. "257",
  306. "274",
  307. "18",
  308. "18",
  309. "274",
  310. "257",
  311. "33",
  312. "86",
  313. "93"
  314. ]
  315. }
  316. ]
  317. }
  318. }

数据格式差不多这样的

渲染后:

img

现在需要将红色框里面分多行行显示

展开全部

  • 写回答

1条回答 默认 最新

  • 小z666 2021-12-02 08:55
    关注

    你这种,我建议直接在一个单元格里用v-for渲染多div,然后调一调样式,可以达到你想要的效果,这是最简单的

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
    刘先森吖丶 2021-12-02 09:06

    有没有类似合并单元格内种的,想用js实现下

    回复
    小z666 回复 刘先森吖丶 2021-12-02 09:14

    img


    有,但是这是多条数据合并成一个,当时你想一条数据分成多个,我不知道行不行。或者你可以研究下

    回复
    小z666 回复 刘先森吖丶 2021-12-02 09:16

    1. <el-table-column label="地址" prop="address">
    2. <template slot-scope="{row}">
    3. <div v-if="Array.isArray(row.address)">
    4. <p v-for="(adr, index) in row.address" :key="index">{{adr}}</p>
    5. </div>
    6. <span v-else>{{row.address}}</span>
    7. </template>
    8. </el-table-column>

    这种方式它不香吗?

    回复
    展开全部4条评论
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 12月9日
  • 已采纳回答 12月2日
  • 创建了问题 12月2日
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部