更改数据表标题中Vuetify复选框的颜色

Question

我想自定义Vuetify的颜色。因此，我正在使用各种组件的插槽来执行此操作。虽然我可以使用header.data-table-select插槽为标题中的复选框实现自定义颜色。仅选中部分行（但不是全部）时，复选框的颜色仍为灰色。谁能建议我可以自定义其颜色。

Link to codesanbox

问题屏幕截图

部分工作

Answer 1

当值为false时，v-simple-checkbox不应用颜色。
但是 props.value 只有在所有值都被选中时才变为真。

我认为这种方式更好。

<template v-slot:[`header.data-table-select`]="{ props, on }">
      <v-simple-checkbox
        :value="props.value || props.indeterminate"
        v-on="on"
        :indeterminate="props.indeterminate"
        color="primary"
      />
</template>

Answer 2

我用这种方式解决了。

<template v-slot:header.data-table-select="{ props, on }">
        <v-simple-checkbox
          color="primary"
          v-if="props.indeterminate"
          v-ripple
          v-bind="props"
          :value="props.indeterminate"
          v-on="on"
        ></v-simple-checkbox>
        <v-simple-checkbox
          color="primary"
          v-if="!props.indeterminate"
          v-ripple
          v-bind="props"
          v-on="on"
        ></v-simple-checkbox>
      </template>