1111

[caiyan1121]

<script lang="ts"> import { SheetComponent } from "@antv/s2-vue"; import { defineComponent, shallowRef, reactive } from "vue"; import "@antv/s2-vue/dist/style.min.css"; const rawDataCfg = { fields: { rows: ["province", "city"], columns: ["type", "sub_type"], values: ["number"], }, meta: [ { field: "number", name: "数量", }, { field: "province", name: "省份", }, { field: "city", name: "城市", }, { field: "type", name: "类别", }, { field: "sub_type", name: "子类别", }, ], data: [ { number: 7789, province: "浙江省", city: "杭州市", type: "家具", sub_type: "桌子", }, { number: 2367, province: "浙江省", city: "绍兴市", type: "家具", sub_type: "桌子", }, { number: 3877, province: "浙江省", city: "宁波市", type: "家具", sub_type: "桌子", }, { number: 4342, province: "浙江省", city: "舟山市", type: "家具", sub_type: "桌子", }, { number: 5343, province: "浙江省", city: "杭州市", type: "家具", sub_type: "沙发", }, { number: 632, province: "浙江省", city: "绍兴市", type: "家具", sub_type: "沙发", }, { number: 7234, province: "浙江省", city: "宁波市", type: "家具", sub_type: "沙发", }, { number: 834, province: "浙江省", city: "舟山市", type: "家具", sub_type: "沙发", }, { number: 945, province: "浙江省", city: "杭州市", type: "办公用品", sub_type: "笔", }, { number: 1304, province: "浙江省", city: "绍兴市", type: "办公用品", sub_type: "笔", }, { number: 1145, province: "浙江省", city: "宁波市", type: "办公用品", sub_type: "笔", }, { number: 1432, province: "浙江省", city: "舟山市", type: "办公用品", sub_type: "笔", }, { number: 1343, province: "浙江省", city: "杭州市", type: "办公用品", sub_type: "纸张", }, { number: 1354, province: "浙江省", city: "绍兴市", type: "办公用品", sub_type: "纸张", }, { number: 1523, province: "浙江省", city: "宁波市", type: "办公用品", sub_type: "纸张", }, { number: 1634, province: "浙江省", city: "舟山市", type: "办公用品", sub_type: "纸张", }, { number: 1723, province: "四川省", city: "成都市", type: "家具", sub_type: "桌子", }, { number: 1822, province: "四川省", city: "绵阳市", type: "家具", sub_type: "桌子", }, { number: 1943, province: "四川省", city: "南充市", type: "家具", sub_type: "桌子", }, { number: 2330, province: "四川省", city: "乐山市", type: "家具", sub_type: "桌子", }, { number: 2451, province: "四川省", city: "成都市", type: "家具", sub_type: "沙发", }, { number: 2244, province: "四川省", city: "绵阳市", type: "家具", sub_type: "沙发", }, { number: 2333, province: "四川省", city: "南充市", type: "家具", sub_type: "沙发", }, { number: 2445, province: "四川省", city: "乐山市", type: "家具", sub_type: "沙发", }, { number: 2335, province: "四川省", city: "成都市", type: "办公用品", sub_type: "笔", }, { number: 245, province: "四川省", city: "绵阳市", type: "办公用品", sub_type: "笔", }, { number: 2457, province: "四川省", city: "南充市", type: "办公用品", sub_type: "笔", }, { number: 2458, province: "四川省", city: "乐山市", type: "办公用品", sub_type: "笔", }, { number: 4004, province: "四川省", city: "成都市", type: "办公用品", sub_type: "纸张", }, { number: 3077, province: "四川省", city: "绵阳市", type: "办公用品", sub_type: "纸张", }, { number: 3551, province: "四川省", city: "南充市", type: "办公用品", sub_type: "纸张", }, { number: 352, province: "四川省", city: "乐山市", type: "办公用品", sub_type: "纸张", }, ], }; const rawOptions = { width: 600, height: 400, }; const themeConfig = { name: 'gray', }; const theme = { name: 'gray', dataCell: { cell: { interactionState: { hoverFocus: { borderColor: 'transparent', borderOpacity: 0 }, }, }, }, }; export default defineComponent({ setup() { // dataCfg 数据字段较多，建议使用 shallow, 如果有数据更改直接替换整个对象 const dataCfg = shallowRef(rawDataCfg); const options = reactive(rawOptions); const themeCfg = reactive(themeConfig); const theme = reactive(theme); return { dataCfg, options, themeCfg, theme }; }, components: { SheetComponent, }, }); </script> <style> </style>

使用SheetComponent组件theme移出hover单元格的黑色边框，移出不了

[lijinke666]

粘贴代码就不能格式化一下吗? 或者直接贴上你的在线可复现链接, 而不是考眼力...

从你粘贴的代码来看, 你写错了, SheetComponent 没有 theme 这个 props, 将 theme 移到 themeCfg 里面即可

文档写的很清楚了, 请仔细阅读相关文档

const themeConfig = {
  name: 'gray',
  theme: {
    dataCell: {
      cell: {
        interactionState: {
          hoverFocus: {
            borderColor: 'transparent',
            borderOpacity: 0
          }
        }
      }
    }
  }
}