将b表的每个单元格中的文本切换到输入框并返回

Question

vue的新手，到目前为止，我很喜欢它。基本上尝试使用BV表来创建类似表格的Excel。当我单击单元格文本时，我希望将其替换为输入框并在模糊时恢复为文本。据我了解，排序在输入字段上不起作用，因此隐藏似乎是最好的选择。

此代码从技术上讲是可行的（不知道如何在SO的代码编辑器中实际运行），但是我试图不为每个字段都添加一个isHidden字段。当前，我将需要isHiddenStartTime和isHiddenEndTime加其他每个字段1。考虑到一次只需要1个标志，这看起来很混乱。

new Vue({
  el: "#app",
  data() {
    return {
      fields: [
        {
          key: 'startTime',
          sortable: true
          },
        {
          key: 'endTime',
          sortable: true
        }
      ],
      port: [
        {
          "portNumber": 1,
          "startTime": "00:00:00.00",
          "endTime": "21:59:59.01",
          "isHidden": false,
          "hiddenType": ""
        }, 
        {
          "portNumber": 7,
          "startTime": "00:00:00.00",
          "endTime": "22:59:59.00",
          "isHidden": false,
          "hiddenType": ""
        }
      ]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

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

<div id="app">
  <b-table  :items="port" :fields="fields" striped fixed responsive="sm">
    <template v-slot:cell(endTime)="{ item }">
      <div v-if="!item.isHidden" @click="item.isHidden = true">
        {{ item.endTime }}
      </div>
      <div v-else>
        <b-form-input 
          v-model="item.endTime" 
          @blur="item.isHidden = false" 
          placeholder="Enter end time" 
          autofocus
        ></b-form-input>
      </div>
    </template>
  </b-table>
</div>

我尝试添加带有单击时添加的字段名称的hiddenType，但是v-if在单击之前运行。如果我使用相同的标志（port.isHidden），则整个行都会更改。如果我将标志放在字段中，则整个列都会更改。考虑到这是一个列表，我看不到使用ref的正确方法。

再次出现，所有问题都是有意义的，我只是找不到一种使之正常工作的干净方法。

Answer 1

代替每个字段都具有isHidden属性，您可以创建一个包含要编辑的当前字段的属性。

在下面的示例中，我创建一个isEditingField属性并将其设置为该列的key，因此startTime或endTime。然后在模糊时，我只需使用$delete从对象中再次删除该属性。

重要的是，如果对象上尚不存在新属性，则使用$set来创建新属性，否则它将是无反应的。您可以在[此处]（[https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats）

上了解更多信息。

您可能还会注意到我在使用v-slot:cell()时未指定字段。这是因为这是一个后备广告位，该位用于插入所有未专门插入的字段。因此，在这种情况下，它将计入所有插槽，而不必为每个插槽创建一个特定的插槽。

new Vue({
  el: "#app",
  data() {
    return {
      fields: [
        {
          key: 'startTime',
          sortable: true
          },
        {
          key: 'endTime',
          sortable: true
        }
      ],
      port: [
        {
          "portNumber": 1,
          "startTime": "00:00:00.00",
          "endTime": "21:59:59.01",
          "hiddenType": ""
        }, 
        {
          "portNumber": 7,
          "startTime": "00:00:00.00",
          "endTime": "22:59:59.00",
          "hiddenType": ""
        }
      ]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>

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

<div id="app">
  <b-table  :items="port" :fields="fields" striped fixed responsive="sm">
    <template v-slot:cell()="{ item, field: { key } }">
      <div v-if="item.isEditingField == key">
        <b-form-input 
          v-model="item[key]" 
          @blur="$delete(item, 'isEditingField')" 
          placeholder="Enter end time" 
          autofocus
        ></b-form-input>
      </div>
      <div v-else @click="$set(item, 'isEditingField', key)">
        {{ item[key] }}
      </div>
    </template>
  </b-table>
</div>