javascript - Vue.js - 打开编辑记录的对话框

Question

我有一个列表，每个记录的右侧都有按钮，它看起来像这样: /image/uevzR.jpg

当我点击其中一个按钮时，我希望弹出一个对话框，其中有文本输入、下拉菜单、复选框等输入字段。此对话框将允许编辑相应的记录(并且仅限此记录)。输入字段应进行相应的标记，基本上每个输入字段应接收从输入字段引用的相应列标题(参见表标题)派生的标签。这样，用户应该知道他正在对记录的哪个字段应用更改。

我是 vue.js 的初学者。我以前从未在 vue.js 中使用过对话。我知道对话并不被认为是网络应用程序中的最佳实践，但这是我们团队出于多种原因做出的设计决策，现在我必须坚持下去。

我们的 vue 应用程序是一个 vue-cli 应用程序。最近的分布。 vue 为我提供了哪些选项来做到这一点？是否可以推荐第三方插件或类似插件？该对话框可能会显示大量数据。这基本上取决于允许用户查看哪些数据。所以我真的需要一些足够强大的方法来“符合人体工程学”地处理至少两位数的输入选项:D

Answer 1

对于对话，您可以使用类似 bootstrap-vue's modal component 的内容.

您可以将所需的任何形式的 HTML 放入模态组件中。

假设您集中的每条记录都具有相同的架构，那么您可以拥有一个数据属性，例如selectedRecord 并将表单中的输入绑定(bind)到 selectedRecord 的属性，然后当单击其中一个记录按钮时，它应该使用单击的记录填充 selectedRecord 并显示模式。

例如

<template>
  <div>
    <ul>
      <li v-for="record in records"
          :key="record.id">
        <span>{{record.name}}</span>
        <button class="btn btn-primary"
                @click="startEditing(record)">Edit
        </button>
      </li>
    </ul>
    <b-modal
      ref="selectedRecordModal"
      id="modal-1"
      title="BootstrapVue"
      @ok="save()"
    >
      <form v-if="selectedRecord">
        <div class="form-group" v-if="editable('name')">
          <label for="name">Name</label>
          <input type="text"
                 id="name"
                 name="name"
                 v-model="selectedRecord.name"
                 class="form-control">
        </div>
        <div class="form-group" v-if="editable('extra')">
          <label for="extra">Extra</label>
          <input type="text"
                 id="extra"
                 name="extra"
                 v-model="selectedRecord.extra"
                 class="form-control">
        </div>
      </form>
    </b-modal>
  </div>
</template>

<script>
  import Vue from 'vue';
  import { BModal } from 'bootstrap-vue'

  export default {
    components: {
      BModal
    },
    data() {
      return {
        records: [
          { id: 1, name: 'record 1' },
          { id: 2, name: 'record 2' },
          { id: 3, name: 'record 3', extra: 'thing'},
        ],
        selectedRecord: null,
        user: {
          permissions: null
        }
      }
    },
    created() {
      //Replace with code for setting permissions dynamically
      this.user.permissions = {name: true, extra: true};
    },
    methods: {
      editable(field) {
        return (this.selectedRecord[field] && this.hasEditPermission(field));
      },
      hasEditPermission(field) {
        return !!this.user.permissions[field];
      },
      startEditing(record) {
        this.selectedRecord = Vue.util.extend({}, record);
        this.$refs.selectedRecordModal.show();
      },
      save() {
        //Validate this.selectedRecord and post to backend, update the original record, hide the modal etc.
        this.$refs.selectedRecordModal.hide();
      }
    }
  }
</script>