时间戳

首页 > 解决方案 > 如何将 toggleSelectAll 功能复选框添加到由标头插槽生成的新标头

vue.js - 如何将 toggleSelectAll 功能复选框添加到由标头插槽生成的新标头

问题描述

我尝试使用插槽自定义 vuetify 数据表头。我禁用了默认标题并使用v-slot:header. 问题是，如果我制作新标题，则没有支持 toggleSelectAll 功能的复选框。代码如下。

<template
  v-slot:header="{ props: { headers } }"
>
  <thead>
    <tr>
      <th v-for="header in headers" :key="header.value">
        <v-simple-checkbox
          color="purple"
          v-if="header.value === 'data-table-select'" 
        ></v-simple-checkbox>
        <span v-else>{{header.text}}</span>
      </th>
    </tr>
  </thead>
</template>

这是 Codepen 链接。 https://codepen.io/em0809/pen/gOrJGjJ

我想将 toggleSelectAll 功能添加到上面的简单复选框。我试过了v-slot:header.data-table-select，但它不起作用。

所以，如果你有经验，请帮助我。

谢谢你。

标签： vue.jsdatatablevuetify.js

解决方案

您可以通过 1 个步骤实现它：

  • 添加@input="on['toggle-select-all']"到您的v-simple-checkbox.
<template #header="{ props, on }">
  <thead>
    <tr>
      <th v-for="header in props.headers" :key="header.value">
        <v-simple-checkbox
          v-if="header.value === 'data-table-select'"
          v-model="props.everyItem"
          :indeterminate="props.someItems && !props.everyItem"
          color="purple"
          @input="on['toggle-select-all']"
        ></v-simple-checkbox>
        <span v-else>{{ header.text }}</span>
      </th>
    </tr>
  </thead>
</template>

#header#header.data-table-select两者都使用时覆盖。

推荐阅读