Vue Buefy table 具有多行状态

Question

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

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

并为特定行添加样式-class:

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

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

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

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

Answer 1

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

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

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

}})

Answer 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>

Vue Buefy table 具有多行状态

Vue Buefy table with multiple row statuses

javascript

html-table

vue.js

vuejs2

buefy