vue.js - 如何在 Table Bootstrap Vue 中为行禁用 v-slot

Question

我在表中为内联编辑编写引导组件
我注意到插槽具有优先级： cell(%cell%) above cell()

如何关闭表中特定行的 v-slot:cell(%cell%)？

<b-table ...>
    <template v-slot:cell()="data">
        <b-input
            v-if="data.item.editing && data.field.editable"
            v-model="tableData[data.index][data.field.key]"
        />
        <span v-else>{{data.value}}</span>
    </template>

    <template
        v-for="(_, slot) of $scopedSlots"
        v-slot:[slot]="scope"
    >
        <slot
            name="cell()"
            v-bind="scope"
        />
    </template>
<b-table>

标签： vue.jsvuejs2vue-componentbootstrap-vue

Answer 1

如果我理解正确，您希望能够在未编辑字段时有一个插槽来自定义布局。

为此，您必须创建自己的组件、包装<b-table>，并创建自己的插槽。

<template v-slot:cell()="data">
    <b-input
      v-if="data.item.editing && data.field.editable"
      v-model="tableData[data.index][data.field.key]"
    />
  <span v-else>
    <slot :name="`noedit(${data.field.key})`" v-bind="data">
      {{ data.value }}
    </slot>
  </span>
</template>

然后，上面的代码将允许您使用插槽noedit(field_key)（您可以将插槽名称更改为您想要的任何名称），以在该字段不处于“编辑”状态时编辑布局。

例子

Vue.component("data-table", {
  template: "#data-table",
  computed: {
    editableFields() {
      return this.fields.filter((field) => field.editable);
    }
  },
  data() {
    return {
      userRow: null
    };
  },
  props: ["items", "fields"],
  methods: {
    editUser(user) {
      let doEdit = true;
      if (
        this.userRow &&
        !confirm("You have unsaved changes, are you sure you want to continue?")
      ) {
        doEdit = false;
      }

      if (doEdit) {
        this.userRow = { ...user };
      }
    },
    saveEdit() {
      let user = this.items.find((u) => u.id === this.userRow.id);
      Object.assign(user, this.userRow);

      this.resetEdit();
    },
    resetEdit() {
      this.userRow = null;
    }
  }
});

new Vue({
  el: "#app",
  data() {
    return {
      fields: [
        { key: "id" },
        { key: "first_name", editable: true },
        { key: "last_name", editable: true },
        { key: "age", editable: true, type: "number", isNumber: true },
        { key: "actions" }
      ],
      items: [
        { id: 1, first_name: "Mikkel", last_name: "Hansen", age: 56 },
        { id: 2, first_name: "Mads", last_name: "Mikkelsen", age: 39 },
        { id: 3, first_name: "Anders", last_name: "Matthesen", age: 42 }
      ]
    };
  }
});

<link href="https://unpkg.com/bootstrap@4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue@2.16.0/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.16.0/dist/bootstrap-vue.js"></script>


<div id="app">
  <data-table :items="items" :fields="fields">
    <template v-slot:noedit(first_name)="{ value }">
      <b class="text-primary">
        {{ value }}
      </b>
    </template>

    <template v-slot:cell(id)="{ value }">
      <i class="text-danger">{{ value }}</i>
    </template>
  </data-table>
</div>

<template id="data-table">
  <b-table :items="items" :fields="fields">
    <template v-for="field in editableFields" v-slot:[`cell(${field.key})`]="s">
      <b-input v-if="userRow && userRow.id === s.item.id" v-model="userRow[s.field.key]" :type="s.field.type || 'text'" :number="s.field.isNumber">
      </b-input>
      <template v-else>
        <slot :name="`noedit(${s.field.key})`" v-bind="s">
          {{ s.value }}
        </slot>
      </template>
    </template>

    <template v-slot:cell(actions)="{ item }">
      <b-button-group v-if="userRow && userRow.id === item.id">
        <b-btn variant="success" @click="saveEdit">
          Save
        </b-btn>
        <b-btn variant="danger" @click="resetEdit">
          Cancel
        </b-btn>
      </b-button-group>
      <b-btn v-else variant="primary" @click="editUser(item)">
        Edit
      </b-btn>
    </template>

    <!-- Pass in slots from parent -->
    <template v-for="name in Object.keys($scopedSlots)" v-slot:[name]="scope">
      <slot :name="name" v-bind="scope"></slot>
    </template>
  </b-table>
</template>