如何去除Chrome中sap_fiori_3主题下表格按钮旁的圆点？

问题原因 #

这个圆点是Chrome浏览器结合sap_fiori_3主题渲染sap.ui.table.Table时的布局兼容性问题：

• 当某列设置width: 100%时，表格会触发flex布局的宽度分配逻辑
• Chrome在这种场景下错误渲染出类似列表项的默认标记圆点，该圆点来自浏览器默认样式或主题继承的列表样式规则，未被控件样式正确覆盖

解决方案 #

以下几种方法均可解决该问题：

1. 给按钮列设置固定宽度 #

避免第一列的100%宽度触发flex布局异常计算，给按钮所在列显式指定宽度：

// edit button
oTable.addColumn(new sap.ui.table.Column({
  width: "4rem", // 也可设置固定像素值如"60px"
  template: new sap.m.Button({
    icon: "sap-icon://edit"
  })
}));

2. 自定义CSS隐藏圆点 #

通过自定义样式强制隐藏表格单元格内的列表标记：

/* 全局样式或组件内样式 */
.sapUiTableCell .sapMBtn {
  list-style: none !important;
}

或者更精准地针对按钮所在的最后一列：

.sapUiTable tr td:last-child {
  list-style-type: none;
}

3. 使用sap.ui.commons.Button替代sap.m.Button #

更换按钮控件类型，避免sap.m.Button的渲染结构触发该样式问题：

// edit button
oTable.addColumn(new sap.ui.table.Column({
  template: new sap.ui.commons.Button({
    icon: "sap-icon://edit"
  })
}));

4. 用flexGrow替代width:100% #

遵循sap.ui.table的布局规范，使用flexGrow属性控制列的扩展，而非直接设置width为100%：

oTable.addColumn(new sap.ui.table.Column({
  flexGrow: 1, // 用flexGrow实现列自适应扩展
  label: new sap.m.Label({
    text: "Last Name"
  }),
  template: new sap.ui.commons.TextView({
    text: "{lastName}"
  })
}));

内容的提问来源于stack exchange，提问作者Cold_Class