如何在Table Bootstrap Vue中为行禁用v槽 示例

问题描述

我在表中编写用于内联编辑的引导程序组件
我注意到插槽具有优先级：cell（％cell％）高于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>

解决方法

如果我的理解正确，那么您希望有一个插槽可以在不编辑字段时自定义布局。

为此，您将必须创建自己的组件，包装<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)（可以将插槽名称更改为所需的名称）在该字段未处于“编辑”状态时编辑布局。 / p>

示例

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",{ 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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/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/[email protected]/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>