How to realize the nesting of element-ui table cells

problem description

the data returned in the background is an array object, and there are also array objects in the array object. The function to be implemented is

like the following figure.

the environmental background of the problems and what methods you have tried

I tried to nest cells with cells, but it didn"t work.

related codes

/ / Please paste the code text below (do not replace the code with pictures)
this is the data returned by our background
{

"ruleCode": "1",
"ruleName": "name",
"ruleType": "type1",
"ruleOrder": 0,
"mainCollection": "www",
"ruleContent": "www",
"description": "www",
"ruleUDF": "www",
"ruleFilters": [
  {
    "isAndOps": true,
    "field": "22",
    "oprator": "ww",
    "matchingValue": "ww",
    "unit": "ww"
  }
  {
    "isAndOps": true,
    "field": "44",
    "oprator": "ee",
    "matchingValue": "ee",
    "unit": "ee"
  }
],
"id": "5c330792325751158cfae7f4",
"state": null,
"createdTime": "2019-01-07T08:02:26.805Z",
"lastModifyTime": "2019-01-07T08:02:26.805Z"

},

what result do you expect? What is the error message actually seen?

I hope the bosses have a good solution to realize the function on the picture, and I also try to find a solution myself

Apr.07,2022

has the landlord solved it? I have the same problem


does the landlord have a solution?


add div to the nested small table, add margin:-7px-11px to the div, and let the div fill the cells of the big table

Menu