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

Posted 2023-02-22

【中文标题】如何在 Table Bootstrap Vue 中为行禁用 v-slot

【英文标题】：How to disabled v-slot for row in Table Bootstrap Vue

【发布时间】：2020-12-20 09:44:29

【问题描述】：

我为表中的内联编辑编写引导组件 我注意到插槽有优先级： 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>

【问题讨论】：

您能否提供一些有关用例的详细信息？

当然codepen.io/blogaster/pen/abNyRYZ我要编辑表格中的数据

哈，真有趣。我创建了那个codepen。我了解您要编辑某些列。但是为什么要禁用特定行上的某些插槽呢？

如果该行有一个槽，那么我无法通过编辑槽影响它。你猜对了我的想法

因此，当该字段未被编辑时，您需要一个用于显示值的槽。我理解正确吗？

【参考方案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>