[Feature] support multiple custom cellStyle

[purpose233]

Version

1.10.0

Link to Minimal Reproduction

null

Steps to Reproduce

let  tableInstance;
  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
    .then((res) => res.json())
    .then((data) => {

const columns =[
    {
        "field": "Order ID",
        "title": "Order ID",
        "width": "auto"
    },
    {
        "field": "Customer ID",
        "title": "Customer ID",
        "width": "auto"
    },
    {
        "field": "Product Name",
        "title": "Product Name",
        "width": "auto"
    },
    {
        "field": "Category",
        "title": "Category",
        "width": "auto"
    },
    {
        "field": "Sub-Category",
        "title": "Sub-Category",
        "width": "auto"
    },
    {
        "field": "Region",
        "title": "Region",
        "width": "auto"
    },
    {
        "field": "City",
        "title": "City",
        "width": "auto"
    },
    {
        "field": "Order Date",
        "title": "Order Date",
        "width": "auto"
    },
    {
        "field": "Quantity",
        "title": "Quantity",
        "width": "auto"
    },
    {
        "field": "Sales",
        "title": "Sales",
        "width": "auto"
    },
    {
        "field": "Profit",
        "title": "Profit",
        "width": "auto"
    }
];

const option = {
  records:data,
  columns,
  widthMode:'standard',
//   theme: {
//     bodyStyle: {
//         borderLineDash: [3,3]
//     }
//   }
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
window['tableInstance'] = tableInstance;

const rowStyle = {
    key: 'customRow',
    row: 2,
    style: {
        bgColor: 'lightgreen',
    }
}
tableInstance.registerCustomCellStyle(rowStyle.key, rowStyle.style);
tableInstance.arrangeCustomCellStyle(
    {
        range: {
          start: {
            row: rowStyle.row,
            col: 0
          },
          end: {
            row: rowStyle.row,
            col: tableInstance.colCount - 1
          }
        }
    },
    rowStyle.key
);

const cellStyle = {
    key: 'customCell',
    row: 2,
    col: 2,
    style: {
        color: 'red'
    }
};

tableInstance.registerCustomCellStyle(cellStyle.key, cellStyle.style);
tableInstance.arrangeCustomCellStyle(
    {
        range: {
          start: {
            row: cellStyle.row,
            col: cellStyle.col
          },
          end: {
            row: cellStyle.row,
            col: cellStyle.col
          }
        }
    },
    cellStyle.key
);

    })

Current Behavior

For now, only one custom cell style will be apply to cell, even if multiple custom cell styles are registered.

Expected Behavior

Apply all registered custom cell styles to tables cell by the register order or priorities.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response