具有多行状态的 Vue Buefy 表

Posted 2023-02-16

【中文标题】具有多行状态的 Vue Buefy 表

【英文标题】：Vue Buefy table with multiple row statuses

【发布时间】：2022-01-05 13:28:21

【问题描述】：

Buefy 表格有一个设置，您可以根据行中的变量选择以特定颜色突出显示的行。

            :row-class="(row, index) => row.variable === x && 'is-info'">

并为特定的行类添加样式：

<style>
    .is-info' 
      background: #FF8C4B;
    

这行得通，我可以突出显示所有以 x 作为变量的行。但考虑一下我是否有一个包含多个变量 X、Y、Z 的表。我希望所有具有 X 变量值的变量都突出显示为蓝色，而 Y 的变量值突出显示为红色。这可能吗？我似乎无法在任何地方找到任何示例。

这是我当前vue页面的数据部分：

export default 
  name: "Demo",
  data: () => 
    data: () => 
return 
  loading: null,
  alphabets: [],
  className:
    'x': '.bg-danger',
    'y': '.bg-success'
  ,
;

【参考方案1】：

您可以在数据对象中定义类映射如下：

:row-class="(row, index) => className[row.variable]">

data: ()=> (className: 
x:'info',
y:'primary'
z:'warning'

)

【讨论】：

我有点困惑，我应该用 html 颜色更改信息、主要和警告吗？

不，它应该替换为上下文类，如 bg-primary、bg-info 或您拥有/可以设置的任何自定义类。你甚至可以使用多个类y: 'bg-primary text-light'

这可能是 vue 的事情，但我应该把 classname ... 放在 return 里面吗？ data: () => return loading: null, letters: [], className: 'x': '.bg-danger', 'y': '.bg-success' , ;

是的，你可以这样做。我错过了大括号

【参考方案2】：

可以这样做：

:row-class="(row, index) => row.alphabet === 'x' && 'is-x' || row.alphabet === 'y' && 'is-y' || row.alphabet === 'z' && 'is-z'"

然后设置样式

<style>
  .is-x
    background: #f15462;
  
  .is-y
    background: #f5bb1a;
  
  .is-z
    background: #3bdc5e;
  

</style>