VTable表格组件是否可以实现不同单元格hover颜色不一样？问题描述请问，可以实现不同单元格hover颜色不一样么

问题描述

请问，可以实现不同单元格hover颜色不一样么？

使用场景：默认情况下，设置hover颜色为蓝色，根据不同条件，高亮了一部分单元格为紫色，但需求不希望hover到高亮单元格时也变成了hove蓝r色。

解决方案

可通过背景色函数来解决，bgColor配置为函数形式来设置特殊值的高亮背景颜色。通过theme.bodyStyle.hover.cellBgColor来设置背景色，同样这里也需要设置成函数，返回不同的背景色，如果有些单元格不想要背景色的话可以放回空字符串。

代码示例

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": "Profit",
        "title": "Profit",
        "width": "auto",
        style:{
            bgColor(args){
                if(args.value>200){
                    return 'rgba(153,0,255,0.2)'
                }
                // 以下代码参考DEFAULT主题配置实现 https://github.com/VisActor/VTable/blob/develop/packages/vtable/src/themes/DEFAULT.ts
                const { col,row, table } = args;
                const {row:index} = table.getBodyIndexByTableIndex(col,row);
                if (!(index & 1)) {
                    return '#FAF9FB';
                }
                return '#FDFDFD';
            }
        }
    },
    {
        "field": "Order ID",
        "title": "Order ID",
        "width": "auto"
    },
    {
        "field": "Customer ID",
        "title": "Customer ID",
        "width": "auto"
    },
    {
        "field": "Product Name",
        "title": "Product Name",
        "width": "auto"
    }
];

const option = {
  records:data,
  columns,
  widthMode:'standard',
  hover:{
    highlightMode:'cell'
  },
  theme:VTable.themes.DEFAULT.extends({
    bodyStyle:{
      hover:{
        cellBgColor(args){
          if(args.value>200){
              return ''
          }
          return '#CCE0FF';
        }
      }
    }
  })
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
window['tableInstance'] = tableInstance;
})

结果展示

直接将示例代码中代码粘贴到官网编辑器中即可呈现。

VTable表格组件是否可以实现不同单元格hover颜色不一样？

问题描述

解决方案

代码示例

结果展示

相关文档