禁用从 vue.js 2 中的循环创建的表的最后一个 <td> 的按钮

Question

我有两个设置按钮的组件，在调用按钮组件的地方有一个 v-for 来循环其他项目。现在我希望最后一个按钮里面的按钮或者如果只生成一个按钮被禁用。

这是我的代码

<template>
  <div class="clickable-text" @click="() => !disabled && onClick()">
    <div :class="className">{{ text }}</div>
    <IconSpinner v-if="loading" class="ml-1" />
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
@Component({})
export default class ClickableText extends Vue {
  @Prop({ default: true }) text: string;
  @Prop({ default: 'default' }) disabled: boolean;
  @Prop() classes: string;
  @Prop({ default: true }) clickable: boolean;
  @Prop({ default: () => {} }) onClick: () => void;
  @Prop({}) loading: boolean;

  get className() {
    return {
      disabled: this.disabled,
      [this.classes]: this.classes,
      clickable: this.clickable && !this.disabled,
    };
  }
}
</script>

内部使用了上面的组件

<component :is="item[header.value].component" v-bind="item[header.value].props" /> ，{{text}} 属性位于 v-bind="item[header.value].props" 中

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th v-for="header in headers" :key="header.value">
            <div @click="headerClicked(header)">
              {{ header.text }}
            </div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, n) in items" :key="n" data-qa="row" :id="item.id ? item.id.value : n">
          <td v-for="header in headers" :key="header.value" :data-qa="header.value">
            <div :class="itemClass(item, header)" @click="itemClicked(item, header)">
              <div v-if="item[header.value] && item[header.value].value">{{ item[header.value].value }}</div>
              <div v-else>
                <component :is="item[header.value].component" v-bind="item[header.value].props" />
              </div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'vue-property-decorator';
import { TableHeader, TableItem, TablePagination, AppTableItemClick } from './interfaces';

@Component
export default class AppTable extends Vue {
  @Prop() headers: TableHeader[];
  @Prop() items: TableItem[];
  @Prop() pagination?: TablePagination;

  itemClass(item: TableItem, header: TableHeader) {
    const isClickable = item[header.value]?.clickable;
    return { link: isClickable, clickable: isClickable };
  }

  headerClicked(header: TableHeader) {
    if (header.sortable) {
      this.$emit('headerClicked', header);
    }
  }

  itemClicked(item: TableItem, header: TableHeader): AppTableItemClick | undefined {
    const headerName = header.value;
    if (item[headerName]?.clickable) {
      const returnValue = { item, id: headerName };
      this.$emit('itemClicked', returnValue);
      item[headerName]?.onClick?.();
      return returnValue;
    }
  }
}
</script>

循环的结果是这样的，如果它是唯一的项目或最后一个项目，我想禁用隐藏联系人按钮。

Answer 1

只需将

disabled

 属性添加到 

component

，并分配给函数的返回值，检查 

index

 是否是 

items

 数组中的最后一个索引。

<tbody>
        <tr v-for="(item, index) in items" :key="index" data-qa="row" :id="item.id ? item.id.value : index">
          <td v-for="header in headers" :key="header.value" :data-qa="header.value">
            <div :class="itemClass(item, header)" @click="itemClicked(item, header)">
              <div v-if="item[header.value] && item[header.value].value">{{ item[header.value].value }}</div>
              <div v-else>
                <!-- Add disabled property based on the condition -->
                <component :is="item[header.value].component" 
                           v-bind="item[header.value].props"
                           :disabled="isLastOrSingleItem(index)" />
              </div>
            </div>
          </td>
        </tr>
      </tbody>

定义一个名为

isLastOrSingleItem

 的新方法来检查索引。

  isLastOrSingleItem(index: number): boolean {
    return index === this.items.length - 1 || this.items.length === 1;
  }